基于JS实现仿百度百家主页的轮播图效果

2024-02-28 06:22:03 300

.ShowEntry{ height:inherit; width:70%; background:#00F; margin-right:10px; float:left; position:relative; } .ShowEntry.carousel-btn-prev,.ShowEntry.carousel-btn-next{ position:absolute; top:130px; width:50px; height:50px; z-index:89; } .addBgi{ background-image:url(../image/%E5%9C%86.png); background-repeat:no-repeat; } .ShowEntry.carousel-btn-prev{ left:15px; background-position:-10px-95px\9; /*background-image:url(../image/%E5%B7%A6%E7%AE%AD%E5%A4%B4.png)*/ } .ShowEntry.carousel-btn-next{ right:15px; background-position:-160px-95px\9; } .ShowEntry.icon-wrap{ position:relative; display:block; margin:10%0010%; width:80%; height:80%; /*z-index:99;*/ } .player{ position:relative; } .player.imgview{ /*width:670px;*/ height:300px; position:relative; overflow:hidden; background:#ccc; } .circles{ position:absolute; bottom:20px; right:0; width:80px; height:8px; } /*.player.circles.active*/ .active{ background:red; opacity:1;/*��ȫ��͸��*/ } .player.circles.circle{ width:8px; height:8px; border-radius:50%; display:inline-block; background:#000; margin-left:2px; opacity:.7; } .box{ height:80px; width:100%; position:absolute; bottom:0; } .box.title{ font-size:18px; line-height:70px; color:#fff; font-family:"΢��ź�","HiraginoSansGB"; display:block; text-align:center; } .box.title:hover{ text-decoration:none; color:#e05a5a; }

varindex=0; //周期：2秒auto_play后不能加括号 varcirculate=setInterval(auto_play,2000);//函数后面不能加括号 //自动播放 functionauto_play(){ //alert(index); if(index>=3) {index=0;} else{index=index+1;} changePic(index); /*$(".imgviewimg").css("display","none");*/ //$(".imgviewimg").attr("src",imgs[index]); //alert(index); } //切换图片 functionchangePic(index){ //alert(index); $(".imgviewa").css("display","none"); $(".boxa").css("display","none"); $(".circlesa").css("background","#000"); //varsrc=$(".imgviewa:eq("+index+")").attr("target"); //alert(src); $(".imgviewa:eq("+index+")").css("display","inline"); $(".boxa:eq("+index+")").css("display","block"); $(".circlesa:eq("+index+")").css("background","red"); //alert(src); } //鼠标进入播放区域暂停播放 $(".imgview").mouseenter(function(){ //alert("hi!"); clearInterval(circulate); }) //鼠标移出播放区域开始播放 $(".imgview").mouseleave(function(){ //alert("hi!"); circulate=setInterval(auto_play,2000); }) //鼠标移入序号圆点切换到序号所对应图 $(".circle").mouseenter(function(){ //如何确定当前circle的序号？ varnum=$(this).index(); //alert(num); clearInterval(circulate); changePic(num); circulate=setInterval(auto_play,2000); }); //点击左边箭头切换到上一张 $(".carousel-btn-prev").click(function(){ clearInterval(circulate); //alert(index); //1.现在处在第几张：index; if(index==0)index=3; elseindex=index-1; changePic(index); circulate=setInterval(auto_play,2000); }); //点击右边箭头切换到下一张 $(".carousel-btn-next").click(function(){ clearInterval(circulate); //alert(index); //1.现在处在第几张：index; if(index==3)index=0; elseindex=index+1; changePic(index); circulate=setInterval(auto_play,2000); });

基于JS实现仿百度百家主页的轮播图效果

热门推荐

随机推荐