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

梦里梦外; 2022-06-02 02:38 274阅读 0赞

<!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.οnlοad=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.οnmοuseοver=function()\{//鼠标进入的时候，停止定时器，让它停下来  
          clearInterval(timer);  
        \}  
        od.οnmοuseοut=function()\{//鼠标离开的时候，继续执行定时器，让它继续动  
          timer=setInterval(move,30);  
        \}  
        document.getElementById("btn1").οnclick=function()\{  
        //速度为-4的时候，就是让它向左边，因为我们是在更改它的定位left,所以负值是左边  
          speed=-4;  
        \}  
        document.getElementById("btn2").οnclick=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>