通过js写一个轮播图

最新推荐文章于 2022-03-11 14:06:16 发布

HongArcher

最新推荐文章于 2022-03-11 14:06:16 发布

阅读量348

点赞数

本文链接：https://blog.csdn.net/HongArcher/article/details/77685743

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style>
           .show{
               width: 400px;
               height: 400px;
               overflow: hidden;
               margin: 0 auto;
           }
           .scroll{
               width: 2000px;
               height: 400px;
           }
           .scroll img{
               width: 400px;
               height: 400px;
               float: left;
           }
       </style>
   </head>
   <body>
       <div class="show">
           <div class="scroll">
               <img src="img/1.jpg" alt="" />
               <img src="img/2.jpg" alt="" />
               <img src="img/3.jpeg" alt="" />
               <img src="img/4.jpg" alt="" />
               <img src="img/1.jpg" alt="" />
           </div>
       </div>
   </body>
   <script type="text/javascript">
       //获取元素
       var scrollDiv = document.getElementsByClassName('scroll')[0];
       //定义初始值
       var left=0;
       //定义一个定时器，走一步
       function move(){
           var timer=setInterval(function(){
           left--;

           if(left % -400==0){
               clearInterval(timer);
               timer = null;
           }
           if(left==-1600){
              left=0;
           }
           scrollDiv.style.marginLeft=left+'px';
       },10);
       }

       //定义一个定时器，每隔固定时间走一张
       setInterval(function(){
           move();
       },5000);
   </script>
</html>