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>
