思路：
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等
来源：https://www.cnblogs.com/52css/archive/2013/03/04/2943144.html