简单轮播图（循环播放）

效果图

素材取自淘宝首页，非广告

原理

原理图

布局

<body>
  <div class="box">    
      <ul id="oul">        
          <li><a href=""><img src="images/scan/1.jpg" alt=""></a></li>            
          <li><a href=""><img src="images/scan/2.jpg" alt=""></a></li>        
          <li><a href=""><img src="images/scan/3.webp" alt=""></a></li>        
          <li><a href=""><img src="images/scan/4.webp" alt=""></a></li>
          //第五张图片和第一张图片一样，形成无缝连接           
          <li><a href=""><img src="images/scan/1.jpg" alt=""></a></li>
      </ul>
  </div>
</body>

样式

<style>    
    *{        margin: 0;        padding: 0;    }    
    .box{        
        width: 520px; 
        height: 280px; 
        margin: 100px auto;
        overflow: hidden;
        position: relative; //子绝父相
    }    
    .box ul{ 
        width: 500%;
        height: 100%;
        position: absolute; //子绝父相，通过设置ul的left值改变让ul移动
    }    
    .box ul li{
        list-style: none;
        float: left;    }
</style>

JS实现

<script>
    window.onload = function(){
        var oul = document.getElementById('oul');  //获取ul
        var num = 0;  //设置ul的left值的变量为num
        var timer;
        timer = setInterval(scoll,5);
        //鼠标滑过时清空定时器让ul停止走动
        oul.onmouseover = function(){
            clearInterval(timer);
        }
       //鼠标移走时定时器重新开始，num继续--，ul继续开始走动
        oul.onmouseout = function(){
            timer = setInterval(scoll,5);
        };
        //num--使ul向左移动，当走过4个图片宽度时让ul从最初的位置开始走动
        function scoll(){
            num --;
            num<=-520*4?num=0:num=num;
            oul.style.left = num + 'px';
        }
    }
</script>

以上就是用JS实现的自动循环轮播图，我又加上了鼠标移过停留的效果。

简单轮播图（循环播放）

效果图

原理

布局

样式

JS实现

推荐阅读更多精彩内容