无缝滚动

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7     *{margin: 0;padding: 0;}
 8     #wrap{width: 1000px;height: 200px;border: 1px solid red;overflow: hidden;margin: 100px auto;}
 9     #con{width: 3000px;height: 200px;overflow: hidden;}
10     #con img{float: left;width: 200px;height: 200px;}
11     input{width: 50px;height: 50px;}
12     </style>
13 </head>
14 <body>
15     <div id="wrap">
16         <div id="con">
17             <img src="img/01.jpg" alt="">
18             <img src="img/02.jpg" alt="">
19             <img src="img/03.jpg" alt="">
20             <img src="img/04.jpg" alt="">
21             <img src="img/05.jpg" alt="">
22             <img src="img/01.jpg" alt="">
23             <img src="img/02.jpg" alt="">
24             <img src="img/03.jpg" alt="">
25             <img src="img/04.jpg" alt="">
26             <img src="img/05.jpg" alt="">
27             
28         </div>
29     </div>
30     <input type="button" value="go">
31     <input type="button" value="stop">
32 
33     <script>
34     var wrap=document.getElementById('wrap');
35     var con=document.getElementById('con');
36     var imgs=con.getElementsByTagName('img');
37     var inp=document.getElementsByTagName('input');
38     var imgw=imgs[0].offsetWidth;
39     var time1=null;
40     function timego() {
41         time1=setInterval(function() {
42             wrap.scrollLeft+=1;
43             if (wrap.scrollLeft>=imgw*5) {
44                 wrap.scrollLeft=0;
45             };
46         },10)
47     };
48     //封装函数减少代码量，函数代表的是计时器的执行
49 
50     timego();//进入页面自动执行；
51     wrap.onmouseover=function() {
52         clearInterval(time1);
53     };
54     wrap.onmouseout=function() {
55         timego();
56     };
57     inp[0].onclick=function() {
58         clearInterval(time1);
59         timego();
60     };
61     inp[1].onclick=function() {
62         clearInterval(time1);
63     };
64     </script>
65 </body>
66 </html>
View Code