如图，图片实现无缝滚动，点击向左向右滚动控制方向，且当鼠标悬浮在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>