原生JS实现轮播图的效果

2018-06-24 02:16:55来源：未知阅读 ()

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

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

<!DOCTYPE html>
   <html>
       <head>
           <meta charset="UTF-8">
           <title></title>
           <style type="text/css">
               body,ul,p{margin:0;padding:0;}
               #boxs{position: relative;width:100%;height:460px;}
               #box{width:100%;height:460px;}
              ul{position:relative;width:100%;height:460px;}
              li{width:100%;height:460px;position:absolute;}
              img{width:100%;height:100%}
              #circle{position: absolute;bottom:0;left:50%;transform: translate(-50%,0);}
              #circle span{display:inline-block;height:20px;width:20px;background:white;vertical-align: top;border:1px solid yellow;border-radius:10px;/*float:left;*/}
              .on{background:red !important;}
              #left{position: absolute;background:red;height:80px;width:50px;line-height:80px;text-align: center;color:white;left:0;top:40%;}
              #right{position: absolute;background:red;height:80px;width:50px;line-height:80px;text-align: center;color:white;right:0;top:40%;}
          </style>
          <script type="text/javascript">
              window.onload=function(){
                  var circle_span=document.getElementById("circle").children;
                  var list=document.getElementById("ul1").children;
                  var box1=document.getElementById("boxs");
                  var btn1=document.getElementById("left");
                  var btn2=document.getElementById("right");
                  var timer=null;
                  var index=0;
                  play();
                  box1.onmouseover=function(){
                      clearInterval(timer);
                  }
                  box1.onmouseout=function(){
                      clearInterval(timer);
                      play();
                  }
                  btn1.onclick=function(){
                      index--;
                      if(index<0){
                          index=5;
                      }            
                      change(index);
                  }
                  btn2.onclick=function(){
                      index++;
                      if(index>5){
                          index=0;
                      }
                      change(index);
                  }
                  for(var i=0;i<circle_span.length;i++){
                      circle_span[i].index=i;
                      circle_span[i].onmouseover=function(){
                          clearInterval(timer);
                          change(this.index);
                          index=this.index;
                      }
                  }
                  function play(){
                      timer=setInterval(function(){
                          index++;
                          if(index>5){
                              index=0;
                          }
                      change(index);
                      },1000);
                  }
                  function change(index){
                      for(var i=0;i<circle_span.length;i++){
                          circle_span[i].setAttribute("class","");
                          list[i].style.display="none";
                      }
                      circle_span[index].className="on";
                      list[index].style.display="block";
                  }
              }            
          </script>
      </head>
      <body>
          <div id="boxs">
              <div id="box">
                  <ul id="ul1">
                     <li><img src="img/11.jpg"/></li>
                    <li><img src="img/22.jpg"/></li>
                    <li><img src="img/33.jpg"/></li>
                    <li><img src="img/44.jpg"/></li>
                    <li><img src="img/55.jpg"/></li>
                    <li><img src="img/66.jpg"/></li>
                  </ul>
              </div>
              <div id="circle">
                  <span class="on"></span>
                  <span></span>
                  <span></span>
                  <span></span>
                  <span></span>
                  <span></span>
              </div>
              <div id="left">向左</div>
              <div id="right">向右</div>
         </div>
     </body>
 </html>