使用定时器实现轮播图

最新推荐文章于 2022-10-27 09:15:15 发布

蕊蕊酱_Krystal

最新推荐文章于 2022-10-27 09:15:15 发布

阅读量1.9k

点赞数

文章标签： clearInterval setInterval

本文链接：https://blog.csdn.net/Krystal_rui/article/details/80908146

版权

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>

   <style>
   *{
      margin: 0;
      padding: 0;
      list-style: none;
   }

   #box{
      width: 700px;
      height: 400px;
      border: solid;
      margin: 100px auto;
      position: relative;
   }

   img{
      width: 700px;
      height: 400px;
      display: none;
   }

    input{
      width: 25px;
      height: 50px;
      background: rgba(0,0,0,0.5);
      border-style: none;
      outline: none;
      cursor: pointer;
   }

   #left{
      position: absolute;
      top:170px;
      left: 0px;
   }

   #right{
      position: absolute;
      top:170px;
      right: 0px;
   }

   ul{
      position: absolute;
      bottom: 0px;
      left: 250px;
   }

   li{
      width: 10px;
      height: 10px;
      border-radius: 50%;
      border: 1px solid;
      margin: 10px;
      float: left;
      cursor: pointer;
   }

   .active{
      display: block;
   }

   .circle{
      background: rgba(0,0,0,0.5);
   }

    </style>
</head>
<body>
   
   <div id="box">
   <input type="button" value="<" id="left">
   <input type="button" value=">" id="right">
   <img src="images/1.jpg" class="active">
   <img src="images/2.jpg">
   <img src="images/3.jpg">
   <img src="images/4.jpg">
   <img src="images/5.jpg">
   <img src="images/6.jpg">
      
   <ul>
      <li class="circle"></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
   </ul>
   </div>
</body>

<script>
   
   window.onload=function(){

      var ArrImg=document.getElementsByTagName('img');
      var ArrLi=document.getElementsByTagName("li");
      var oLeft=document.getElementById('left');
      var oRgt=document.getElementById("right");
      var oBox=document.getElementById("box");
      var imgNum=0;

      for (var i = 0; i < ArrLi.length; i++) {
            ArrLi[i].index=i;
         ArrLi[i].onmouseover=function(){

            for (var l = 0; l < ArrLi.length; l++) {
               
                  ArrLi[l].className="";
                  ArrImg[l].className="";
                    }
            
            this.className="circle";
            ArrImg[this.index].className="active";
            imgNum=this.index;
         }
        }

        oRgt.onclick=move;
      var x=setInterval(move,1000);
       oBox.onmouseover=function(){
            clearInterval(x)
         };

      oBox.onmouseout=function(){
            x=setInterval(move,1000);
         }


      function move(){
         imgNum=imgNum+1;


         if (imgNum>=ArrImg.length) {
            imgNum=0;
         }

         for (var z = 0; z < ArrLi.length; z++) {
            ArrImg[z].className="";
            ArrLi[z].className="";
         }

          ArrImg[imgNum].className="active";
         ArrLi[imgNum].className="circle";
        }

        oLeft.onclick=function(){

           imgNum=imgNum-1;

           if (imgNum<0) {
              imgNum=ArrLi.length-1;
           }

           for (var j = 0; j < ArrLi.length; j++) {
              ArrImg[j].className="";
              ArrLi[j].className="";
           }

           ArrImg[imgNum].className="active";
           ArrLi[imgNum].className="circle";
        }



   }
</script>
</html>