实现图片的无缝滚动就是要让你的图片集在一定时间里自动切换，那就需要js里的定时器来控制时间。
js中关于定时器的方法有两种：setTimeout和setInterval。它们接收的参数是一样的，第一个参数是函数，用于定时器的执行，第二个参数是数字，表示多少毫秒之后执行函数。它们的不同点在于setTimeout只执行一次指定的函数，而setInterval则每隔规定的时间就执行一次指定的函数。
在定时器后面我们还要知道清除定时器的方法：clearTimeout和clearInterval。它们都只接收一个参数，即定时器返回的值，用于消除指定的定时器。
知道定时器以后我们就要想办法让图片动起来，让图片元素按一定的速度移位就能实现。可以用js控制元素的样式，例如：
oUl.style.left = oUl.offsetLeft + speed + 'px';//其中speed的正负可以改变移动的方向。
代码如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>ZuiYangDan</title> 7 <style> 8 * { 9 margin: 0; 10 padding: 0; 11 list-style: none; 12 } 13 14 #container { 15 width: 100%; 16 border: 1px solid #aaa; 17 margin: 100px 0px; 18 } 19 20 #pictures { 21 width: 100%; 22 height: 520px; 23 overflow: hidden; 24 position: relative; 25 } 26 27 #ul1 { 28 position: absolute; 29 left: 0; 30 top: 0; 31 overflow: hidden; 32 } 33 34 #ul1 li { 35 float: left; 36 width: 700px; 37 height: auto; 38 } 39 40 #ul1 li img { 41 width: 700px; 42 height: auto; 43 } 44 45 </style> 46 <script> 47 window.onload = function() { 48 var oDiv = document.getElementById("pictures"); 49 var oUl = document.getElementById("ul1"); 50 var speed = -3; 51 var oLi = document.getElementsByTagName("li"); 52 53 oUl.innerHTML += oUl.innerHTML;//先把图片增加一组 54 oUl.style.width = oLi.length * oLi[0].offsetWidth + "px"; 55 56 function move() { 57 if (oUl.offsetLeft < -oUl.offsetWidth / 2) { 58 oUl.style.left = "0"; 59 } 60 oUl.style.left = oUl.offsetLeft + speed + "px"; 61 } 62 var timer = setInterval(move, 30); 63 oDiv.onmouseover = function() { 64 clearInterval(timer); 65 }; 66 oDiv.onmouseout = function() { 67 timer = setInterval(move, 30); 68 }; 69 } 70 71 </script> 72 </head> 73 74 <body> 75 <div id="container"> 76 <div id="pictures"> 77 <ul id="ul1"> 78 <li><img src="./image/P70225-210657.jpg" alt=""></li> 79 <li><img src="./image/P70225-210750.jpg" alt=""></li> 80 <li><img src="./image/P70225-210838.jpg" alt=""></li> 81 <li><img src="./image/P70225-210909.jpg" alt=""></li> 90 </ul> 91 </div> 92 </div> 93 </body> 94 95 </html>