javascript实现图片循环滚动效果

最新推荐文章于 2024-09-20 15:23:42 发布

weixin_30617737

最新推荐文章于 2024-09-20 15:23:42 发布

阅读量1k

点赞数 2

原文链接：http://www.cnblogs.com/amberriver2759/p/8514900.html

版权

如图，图片实现无缝滚动，点击向左向右滚动控制方向，且当鼠标悬浮在div中时，图片停止滚动；当鼠标离开div中，图片继续滚动。

原理：复制一遍整个ul，给定一个速度让ul向右或向左滚动，当整个ul要滚动到div边界时，再将整个复制的ul向左或向右拖拽直至整个ul中的图片归位。

图①

图②

图③

图④

图⑤

如图图片向左滚动，当运动到图③位置时，offsetLeft就小于二分之一ul的宽度，此时将ul中的第一个图片拉回到起点即图①的位置；

同理当图片向右滚动运动到图④位置，此时在div内部的ul的offsetLeft就大于0，将ul中的第八个图片拉回到原位即图⑤的位置。

上代码：

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4 <meta charset="utf-8">
  5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6 <title>无缝滚动，移入暂停</title>
  7 <style>
  8 body,div,ul,li,p
  9 {
 10     padding: 0;
 11     margin: 0;
 12 }
 13 #div1
 14 {
 15     position: relative;
 16     margin: 10px auto;
 17     border: 1px solid black;
 18     width: 680px;
 19     height:170px;
 20     overflow: hidden;
 21 }
 22 #div1 ul
 23 {
 24     position: absolute;
 25     left:0;
 26 }
 27 #div1 ul li
 28 {
 29     float:left;
 30     padding: 10px;
 31     list-style: none;
 32     width: 150px;
 33     height: 150px;
 34 }
 35 #div1 ul li img
 36 {
 37     width: 150px;
 38     height: 150px;
 39 }
 40 </style>
 41 <script>
 42 window.onload = function()
 43 {
 44     var oDiv = document.getElementById("div1");
 45     var oUl = document.getElementsByTagName("ul")[0];
 46     var oLi = document.getElementsByTagName("li");
 47     var oA = document.getElementsByTagName("a");
 48     var timer = null;
 49     var iSpeed = 8;
 50     //复制一遍ul
 51     oUl.innerHTML +=oUl.innerHTML;
 52     //ul的宽度是所有li宽度之和，复制ul之后的整个ul的宽度就是li的长度乘以一个li的宽度
 53     oUl.style.width = oLi.length*oLi[0].offsetWidth + "px";
 54     function fnMove()
 55     {
 56         //图片向左移动时的条件，即在div里的ul的offsetLeft小于一个ul的宽度
 57         if (oUl.offsetLeft<-oUl.offsetWidth/2)
 58         {
 59             //将整个复制的ul向右拖拽直至整个ul中的第一张图归位到起点
 60             oUl.style.left = 0;
 61         }
 62         //图片向右移动时的条件，即在div里的ul的offsetLeft大于等于0
 63         else if (oUl.offsetLeft>=0)
 64         {
 65             //将整个复制的ul向左拖拽直至整个ul中的第一张图归位到起点
 66             oUl.style.left = -oUl.offsetWidth/2 + "px";
 67         }
 68         //给ul一个速度让整个ul的offsetLeft增加或减少，速度为正则向右移动，速度为负则向左移动
 69         oUl.style.left = oUl.offsetLeft +iSpeed + "px";
 70     }
 71     timer=setInterval(fnMove,30)
 72     //点击向左滚动即触发第一个a元素标签
 73     oA[0].onclick = function()
 74     {
 75         iSpeed = -8;
 76     }
 77     //点击向右滚动即触发第二个a元素标签
 78     oA[1].onclick = function()
 79     {
 80         iSpeed = 8;
 81     }
 82     //当鼠标移动到div里面的时候图片滚动暂停，此时清除定时器即可。
 83     oDiv.onmouseover = function()
 84     {
 85         clearInterval(timer);
 86     }
 87     //当鼠标移出div的时候图片继续滚动，此时重新加载定时器。
 88     oDiv.onmouseout = function()
 89     {
 90         timer=setInterval(fnMove,30);
 91     }
 92 }
 93 </script>
 94 </head>
 95 <body>
 96 <div id="div1">
 97     <ul>
 98         <li><img src="img/1.png"></li>
 99         <li><img src="img/2.png"></li>
100         <li><img src="img/3.png"></li>
101         <li><img src="img/4.png"></li>
102     </ul>
103 </div>
104 <a href="javascript:;">向左滚动</a>
105 <a href="javascript:;">向右滚动</a>
106 </body>
107 </html>