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

 <div class="ShowEntry">      <!-- <div id="widget_content_player" class="Player" alog-group="log-player">-->       <!--------- 右击箭头--------->       <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" id="widget_content_player_prev" class="prev carousel-btn-prev">        <span class="icon-wrap"><img src="image/箭头左.png"></span>       </a>       <div id="widget_content_player_wrapper" class="player">        <!---------- 一张大图和涂上的文字 ------->        <div id="widget_content_player_imgView" class="imgview">          <!---------- 一张大图 ------->          <a href="" target=" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" _blank" mon="a=12&col=1&pn=2">          <img src="http://d.hiphotos.baidu.com/news/q%3D100/sign=da32af9f01fa513d57aa68de0d6c554c/c75c10385343fbf2f9ac9c60b97eca8064388ff4.jpg" hadcut="1" class="active" style="width: 100%; height: 100%; opacity: 1;">          </a>          <a href="" target=" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" _blank" mon="a=12&col=1&pn=2">          <img src="image/95eef01f3a292df570506750b5315c6035a873e0.jpg" style="width: 100%; height: 100%; opacity: 1;">            </a>          <a href="" target=" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" _blank" mon="a=12&col=1&pn=2">          <img src="image/0824ab18972bd407e8f01db872899e510fb30944.jpg.png" style="width: 100%; height: 100%; opacity: 1;">             </a>          <a href="" target=" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" _blank" mon="a=12&col=1&pn=2">          <img src="image/9825bc315c6034a8cfd58fc7c213495409237644.jpg" style="width: 100%; height: 100%; opacity: 1;">             </a>          <!--<div class="readnum"><span class="tit">阅读数</span><span class="num" data-read="16913">16913</span></div>-->                         <!---------- 图片下方的解释文字，由js控制 哪张图对应哪个链接 ------->          <div class="box">           <i class="mark"></i>           <a href="http://mbcaijing.baijia.baidu.com/article/755645" target="_blank" class="title">李嘉诚400亿澳洲并购：千亿现金急寻出路</a>           <a href="http://mbcaijing.baijia.baidu.com/article/755645" target="_blank" class="title" style="display:none">美女</a>           <a href="http://mbcaijing.baijia.baidu.com/article/755645" target="_blank" class="title" style="display:none">自行车</a>           <a href="http://mbcaijing.baijia.baidu.com/article/755645" target="_blank" class="title" style="display:none">足球</a>          </div>        </div>        <!---------- 右下方四个点 ------->        <div class="circles">        <a href="http://guoshiliangbo.baijia.baidu.com/article/756806" class="circle" target="_blank" style="background:red"></a>        <a href="http://yemacaijing.baijia.baidu.com/article/755797" class="circle" target="_blank"></a>        <a href="http://mbcaijing.baijia.baidu.com/article/755645" class="circle " target="_blank"></a>        <a href="http://junstapo.baijia.baidu.com/article/755717" class="circle " target="_blank" ></a>        </div>       </div>       <!--------- 右击箭头--------->       <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" id="widget_content_player_next" class="next carousel-btn-next">        <span class="icon-wrap"><img src="image/右箭头.png"</span>       </a>      <!-- </div>-->     </div>

.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;}

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=$(".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=$(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); });