原生JS实现轮播图的效果：

　　只要缕清了全局变量index的作用，这个轮播图也就比较容易实现了；另外，为了实现轮这个效果，有几处clearInterval()必须写上。废话不多说，直接上代码，修复了几个比较诡异的bug：

  1. <!DOCTYPE html>
  2.    <html>
  3.        <head>
  4.            <meta charset="UTF-8">
  5.            <title></title>
  6.            <style type="text/css">
  7.                body,ul,p{margin:0;padding:0;}
  8.                #boxs{position: relative;width:100%;height:460px;}
  9.                #box{width:100%;height:460px;}
  10.               ul{position:relative;width:100%;height:460px;}
  11.               li{width:100%;height:460px;position:absolute;}
  12.               img{width:100%;height:100%}
  13.               #circle{position: absolute;bottom:0;left:50%;transform: translate(-50%,0);}
  14.               #circle span{display:inline-block;height:20px;width:20px;background:white;vertical-align: top;border:1px solid yellow;border-radius:10px;/*float:left;*/}
  15.               .on{background:red !important;}
  16.               #left{position: absolute;background:red;height:80px;width:50px;line-height:80px;text-align: center;color:white;left:0;top:40%;}
  17.               #right{position: absolute;background:red;height:80px;width:50px;line-height:80px;text-align: center;color:white;right:0;top:40%;}
  18.           </style>
  19.           <script type="text/javascript">
  20.               window.onload=function(){
  21.                   var circle_span=document.getElementById("circle").children;
  22.                   var list=document.getElementById("ul1").children;
  23.                   var box1=document.getElementById("boxs");
  24.                   var btn1=document.getElementById("left");
  25.                   var btn2=document.getElementById("right");
  26.                   var timer=null;
  27.                   var index=0;
  28.                   play();
  29.                   box1.onmouseover=function(){
  30.                       clearInterval(timer);
  31.                   }
  32.                   box1.onmouseout=function(){
  33.                       clearInterval(timer);
  34.                       play();
  35.                   }
  36.                   btn1.onclick=function(){
  37.                       index--;
  38.                       if(index<0){
  39.                           index=5;
  40.                       }            
  41.                       change(index);
  42.                   }
  43.                   btn2.onclick=function(){
  44.                       index++;
  45.                       if(index>5){
  46.                           index=0;
  47.                       }
  48.                       change(index);
  49.                   }
  50.                   for(var i=0;i<circle_span.length;i++){
  51.                       circle_span[i].index=i;
  52.                       circle_span[i].onmouseover=function(){
  53.                           clearInterval(timer);
  54.                           change(this.index);
  55.                           index=this.index;
  56.                       }
  57.                   }
  58.                   function play(){
  59.                       timer=setInterval(function(){
  60.                           index++;
  61.                           if(index>5){
  62.                               index=0;
  63.                           }
  64.                       change(index);
  65.                       },1000);
  66.                   }
  67.                   function change(index){
  68.                       for(var i=0;i<circle_span.length;i++){
  69.                           circle_span[i].setAttribute("class","");
  70.                           list[i].style.display="none";
  71.                       }
  72.                       circle_span[index].className="on";
  73.                       list[index].style.display="block";
  74.                   }
  75.               }            
  76.           </script>
  77.       </head>
  78.       <body>
  79.           <div id="boxs">
  80.               <div id="box">
  81.                   <ul id="ul1">
  82.                      <li><img src="img/11.jpg"/></li>
  83.                     <li><img src="img/22.jpg"/></li>
  84.                     <li><img src="img/33.jpg"/></li>
  85.                     <li><img src="img/44.jpg"/></li>
  86.                     <li><img src="img/55.jpg"/></li>
  87.                     <li><img src="img/66.jpg"/></li>
  88.                   </ul>
  89.               </div>
  90.               <div id="circle">
  91.                   <span class="on"></span>
  92.                   <span></span>
  93.                   <span></span>
  94.                   <span></span>
  95.                   <span></span>
  96.                   <span></span>
  97.               </div>
  98.               <div id="left">向左</div>
  99.               <div id="right">向右</div>
  100.          </div>
  101.      </body>
  102.  </html>

 

版权声明：本文为mycognos原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/mycognos/p/9180298.html