欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

原生JS实现轮播图的效果

程序员文章站 2022-06-26 12:12:19
原生JS实现轮播图的效果: 只要缕清了全局变量index的作用,这个轮播图也就比较容易实现了;另外,为了实现轮这个效果,有几处clearInterval()必须写上。废话不多说,直接上代码,修复了几个比较诡异的bug: ......

原生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>