如圖，圖片實現無縫滾動，點擊向左向右滾動控制方向，且當鼠標懸浮在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>