思路：
1、获取元素。
2、要使图片动起来就是用setInterval来改变，如往左边滚动就改变offsetLeft，把图片的左边距改为负数。
3、当图片往左滚的时候，右边就会出现空白，这时候需要用innerHTML复制原来的4个li 形成8个li
4、就算有8个li，但总会有滚到尽头的时候，这时就做一个判断当offsetLeft大于ul宽度的一半时，把ul拉回来0的位置（往左滚）。
5、当offsetLeft大于0时，就把Left设置为负ul 宽度的一半。（往右滚）
6、鼠标指向图片，图片停止。
7、鼠标离开图片，图片继续滚动。
8、往左滚 往右滚就是控制offsetLeft，负数就是向左滚，正数就是向右滚。
JS代码：
1 <script> 2 window.onload=function() 3 { 4 var pic=document.getElementById('pic'); 5 var ul=pic.getElementsByTagName('ul')[0]; 6 var li=pic.getElementsByTagName('li'); 7 var left=document.getElementById('left'); 8 var right=document.getElementById('right'); 9 var speed=2; 10 11 ul.innerHTML=ul.innerHTML+ul.innerHTML; 12 ul.style.width=li[0].offsetWidth*li.length+'px'; 13 14 var move=function(){ 15 if(ul.offsetLeft<-ul.offsetWidth/2){ 16 ul.style.left='0'; 17 } 18 if(ul.offsetLeft>0){ 19 ul.style.left=-ul.offsetWidth/2+'px'; 20 } 21 ul.style.left=ul.offsetLeft+speed+'px'; 22 } 23 24 var timer=setInterval(move,30); 25 26 pic.onmouseover=function() 27 { 28 clearInterval(timer); 29 }; 30 31 pic.onmouseout=function() 32 { 33 setInterval(move,30); 34 }; 35 36 left.onclick=function() 37 { 38 speed=-2; 39 }; 40 41 right.onclick=function() 42 { 43 speed=2; 44 }; 45 }; 46 </script>
完整代码：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>JS无缝滚动</title> 6 <style> 7 *{margin:0;padding:0;} 8 #pic{position:relative;width:600px;height:150px;overflow:hidden;background:#000;margin:300px auto;} 9 #pic ul{position:absolute;top:0;left:0;} 10 #pic ul li{float:left;list-style:none;height:150px;width:150px;} 11 </style> 12 <script> 13 window.onload=function() 14 { 15 var pic=document.getElementById('pic'); 16 var ul=pic.getElementsByTagName('ul')[0]; 17 var li=pic.getElementsByTagName('li'); 18 var left=document.getElementById('left'); 19 var right=document.getElementById('right'); 20 var speed=2; 21 22 ul.innerHTML=ul.innerHTML+ul.innerHTML; 23 ul.style.width=li[0].offsetWidth*li.length+'px'; 24 25 var move=function(){ 26 if(ul.offsetLeft<-ul.offsetWidth/2){ 27 ul.style.left='0'; 28 } 29 if(ul.offsetLeft>0){ 30 ul.style.left=-ul.offsetWidth/2+'px'; 31 } 32 ul.style.left=ul.offsetLeft+speed+'px'; 33 } 34 35 var timer=setInterval(move,30); 36 37 pic.onmouseover=function() 38 { 39 clearInterval(timer); 40 }; 41 42 pic.onmouseout=function() 43 { 44 setInterval(move,30); 45 }; 46 47 left.onclick=function() 48 { 49 speed=-2; 50 }; 51 52 right.onclick=function() 53 { 54 speed=2; 55 }; 56 }; 57 </script> 58 </style> 59 </head> 60 61 <body> 62 <a id="left" href="javascript:">左</a> 63 <a id="right" href="javascript:">右</a> 64 <div id="pic"> 65 <ul> 66 <li><img src="images/1.jpg" /></li> 67 <li><img src="images/2.jpg" /></li> 68 <li><img src="images/3.jpg" /></li> 69 <li><img src="images/4.jpg" /></li> 70 </ul> 71 </div> 72 </body> 73 </html>
offsetLeft：左边距，这个边距是所有作用于元素后的边距，会算上margin padding等