js定时器实现图片的无缝轮播

时间:2021-01-18 00:09:55
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无缝滚动轮播图</title>
 <style>
     *{
       margin: 0;
       padding:0;
     }
     body{
       width: 1000px;
       margin: 100px auto;
       background-color: #fff;
     }
     #wrapper{
       overflow: hidden;
       width: 600px;
       height: 100px;
       position: relative;
         
     }
     #wrapper ul {
       position: absolute;
       left: 0;
       top: 0;
     }
     #wrapper li{
       float: left;
       list-style: none;
     }
     #wrapper li img{
       width: 150px;
       height: 100px;
       border-radius: 9px;
     }
     input[type=button]{
       margin-top: 20px;
       width: 35px; 
       height: 25px;
       line-height: 25px;
     }
    </style>
    <script type="text/javascript">
      window.onload=function(){
        var timer=null;//这里只是给个定义,不让变量是undefind就行,也可以直接赋值
        var speed=4;//速度
        var od=document.getElementById("wrapper");//最外部的div
        var au=od.getElementsByTagName('ul')[0];
        var ali=au.getElementsByTagName('li');
        au.innerHTML=au.innerHTML+au.innerHTML;//这里是把ul的内容*2
        au.style.width=ali[0].offsetWidth*ali.length+'px';//ul的宽度时多有的li的宽度之和
        timer=setInterval(move,30);//定时器重复执行move这个函数,每0.3秒执行一次
        function move(){//这个函数的作用是移动
// offsetLeft是指当前元素距离左侧的距离
//       offsetWidth是指对象整体的实际宽度,包滚动条等边线,会随对象显示大小的变化而改变
          if(au.offsetLeft<-au.offsetWidth/2){
//     如果ul距离他的父元素wrapper的左侧距离小于ul这个元素整体宽度的一半,就让它的左边距归0
        au.style.left='0';
          }
          if(au.offsetLeft>0){
//         如果左边距大于0,那么左边距就等于当前ul的总体宽度除以2
            au.style.left=-au.offsetWidth/2+'px';
          }
          au.style.left=au.offsetLeft+speed+'px';
//        ul的左边定位left等于ul的左边距+4,加这个4的原因是控制速度,不信你可以更改一下,数值越大速度越快
        }
        od.onmouseover=function(){//鼠标进入的时候,停止定时器,让它停下来
          clearInterval(timer);
        }
        od.onmouseout=function(){//鼠标离开的时候,继续执行定时器,让它继续动
          timer=setInterval(move,30);
        }
        document.getElementById("btn1").onclick=function(){
        //速度为-4的时候,就是让它向左边,因为我们是在更改它的定位left,所以负值是左边
          speed=-4;
        }
        document.getElementById("btn2").onclick=function(){
        //速度为4的时候,就是让它向右边,因为我们是在更改它的定位left,所以负值是右边
          speed=4;
        }
      }
    </script>
</head>
<body>
<div id="wrapper">
     <ul>
       <li><img src="img/111.jpg"/></li>
       <li><img src="img/222.png"/></li>
       <li><img src="img/333.png"/></li>
       <li><img src="img/444.jpg"/></li>
       <li><img src="img/555.jpg"/></li>
     </ul>
   </div>
   <input type="button" name="" id="btn1" value="向左" />
   <input type="button" id="btn2" value="向右"/>
</body>
</html>