如圖，圖片實現無縫滾動，點擊向左向右滾動控制方向，且當鼠標懸浮在div中時，圖片停止滾動；當鼠標離開div中，圖片繼續滾動。
原理：復制一遍整個ul，給定一個速度讓ul向右或向左滾動，當整個ul要滾動到div邊界時，再將整個復制的ul向左或向右拖拽直至整個ul中的圖片歸位。
圖①
圖②
圖③
圖④
圖⑤
如圖圖片向左滾動，當運動到圖③位置時，offsetLeft就小於二分之一ul的寬度，此時將ul中的第一個圖片拉回到起點即圖①的位置；
同理當圖片向右滾動運動到圖④位置，此時在div內部的ul的offsetLeft就大於0，將ul中的第八個圖片拉回到原位即圖⑤的位置。
上代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>無縫滾動，移入暫停</title>
<style>
body,div,ul,li,p
{
padding: 0;
margin: 0;
}
#div1
{
position: relative;
margin: 10px auto;
border: 1px solid black;
width: 680px;
height:170px;
overflow: hidden;
}
#div1 ul
{
position: absolute;
left:0;
}
#div1 ul li
{
float:left;
padding: 10px;
list-style: none;
width: 150px;
height: 150px;
}
#div1 ul li img
{
width: 150px;
height: 150px;
}
</style>
<script>
window.onload = function()
{
var oDiv = document.getElementById("div1");
var oUl = document.getElementsByTagName("ul")[0];
var oLi = document.getElementsByTagName("li");
var oA = document.getElementsByTagName("a");
var timer = null;
var iSpeed = 8;
//復制一遍ul
oUl.innerHTML +=oUl.innerHTML;
//ul的寬度是所有li寬度之和，復制ul之后的整個ul的寬度就是li的長度乘以一個li的寬度
oUl.style.width = oLi.length*oLi[0].offsetWidth + "px";
function fnMove()
{
//圖片向左移動時的條件，即在div里的ul的offsetLeft小於一個ul的寬度
if (oUl.offsetLeft<-oUl.offsetWidth/2)
{
//將整個復制的ul向右拖拽直至整個ul中的第一張圖歸位到起點
oUl.style.left = 0;
}
//圖片向右移動時的條件，即在div里的ul的offsetLeft大於等於0
else if (oUl.offsetLeft>=0)
{
//將整個復制的ul向左拖拽直至整個ul中的第一張圖歸位到起點
oUl.style.left = -oUl.offsetWidth/2 + "px";
}
//給ul一個速度讓整個ul的offsetLeft增加或減少，速度為正則向右移動，速度為負則向左移動
oUl.style.left = oUl.offsetLeft +iSpeed + "px";
}
timer=setInterval(fnMove,30)
//點擊向左滾動即觸發第一個a元素標簽
oA[0].onclick = function()
{
iSpeed = -8;
}
//點擊向右滾動即觸發第二個a元素標簽
oA[1].onclick = function()
{
iSpeed = 8;
}
//當鼠標移動到div里面的時候圖片滾動暫停，此時清除定時器即可。
oDiv.onmouseover = function()
{
clearInterval(timer);
}
//當鼠標移出div的時候圖片繼續滾動，此時重新加載定時器。
oDiv.onmouseout = function()
{
timer=setInterval(fnMove,30);
}
}
</script>
</head>
<body>
<div id="div1">
<ul>
<li><img src="img/1.png"></li>
<li><img src="img/2.png"></li>
<li><img src="img/3.png"></li>
<li><img src="img/4.png"></li>
</ul>
</div>
<a href="javascript:;">向左滾動</a>
<a href="javascript:;">向右滾動</a>
</body>
</html>