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

HTML                 

<div> <!-- <div alog-group="log-player">--> <!--------- 右击箭头---------> <a href="javascript:void(0);"> <span><img src="https://www.jb51.net/image/箭头左.png"></span> </a> <div> <!---------- 一张大图和涂上的文字 -------> <div> <!---------- 一张大图 -------> <a href="" target=" _blank" mon="a=12&amp;col=1&amp;pn=2"> <img src="https://d.hiphotos.baidu.com/news/q%3D100/sign=da32af9f01fa513d57aa68de0d6c554c/c75c10385343fbf2f9ac9c60b97eca8064388ff4.jpg" hadcut="1"> </a> <a href="" target=" _blank" mon="a=12&amp;col=1&amp;pn=2"> <img src="https://www.jb51.net/image/95eef01f3a292df570506750b5315c6035a873e0.jpg"> </a> <a href="" target=" _blank" mon="a=12&amp;col=1&amp;pn=2"> <img src="https://www.jb51.net/image/0824ab18972bd407e8f01db872899e510fb30944.jpg.png"> </a> <a href="" target=" _blank" mon="a=12&amp;col=1&amp;pn=2"> <img src="https://www.jb51.net/image/9825bc315c6034a8cfd58fc7c213495409237644.jpg"> </a> <!--<div><span>阅读数</span><span data-read="16913">16913</span></div>--> <!---------- 图片下方的解释文字，由js控制 哪张图对应哪个链接 -------> <div> <i></i> <a href="https://mbcaijing.baijia.baidu.com/article/755645" target="_blank">李嘉诚400亿澳洲并购：千亿现金急寻出路</a> <a href="https://mbcaijing.baijia.baidu.com/article/755645" target="_blank">美女</a> <a href="https://mbcaijing.baijia.baidu.com/article/755645" target="_blank">自行车</a> <a href="https://mbcaijing.baijia.baidu.com/article/755645" target="_blank">足球</a> </div> </div> <!---------- 右下方四个点 -------> <div> <a href="https://guoshiliangbo.baijia.baidu.com/article/756806" target="_blank"></a> <a href="https://yemacaijing.baijia.baidu.com/article/755797" target="_blank"></a> <a href="https://mbcaijing.baijia.baidu.com/article/755645" target="_blank"></a> <a href="https://junstapo.baijia.baidu.com/article/755717" target="_blank" ></a> </div> </div> <!--------- 右击箭头---------> <a href="javascript:void(0);"> <span><img src="https://www.jb51.net/image/右箭头.png"</span> </a> <!-- </div>--> </div>

CSS

.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% 0 0 10%; 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: "΢���ź�","Hiragino Sans GB"; display: block; text-align:center; } .box .title:hover { text-decoration: none; color: #e05a5a; }

javascript

var index=0; //周期：2秒 auto_play后不能加括号 var circulate=setInterval(auto_play,2000);//函数后面不能加括号 //自动播放 function auto_play(){ //alert(index); if(index>=3) {index=0;} else {index=index+1;} changePic(index); /*$(".imgview img").css("display","none");*/ //$(".imgview img").attr("src",imgs[index]); //alert(index); } //切换图片 function changePic(index){ //alert(index); $(".imgview a").css("display","none"); $(".box a").css("display","none"); $(".circles a").css("background","#000"); //var src=https://www.jb51.net/article/$(".imgview a:eq("+index+")").attr("target"); //alert(src); $(".imgview a:eq("+index+")").css("display","inline"); $(".box a:eq("+index+")").css("display","block"); $(".circles a: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的序号？ var num=https://www.jb51.net/article/$(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; else index=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; else index=index+1; changePic(index); circulate=setInterval(auto_play,2000); });