1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 </head>
7 <style>
8 *
9 {
10 margin: 0;
11 padding: 0;
12 }
13 #all
14 {
15 width:1320px;
16 height:124px;
17 border:1px solid #ccc;
18 margin: 50px auto;
19 overflow: hidden;
20 }
21 #con
22 {
23 height: 124px;
24 width: 3000px;
25 overflow: hidden;
26 }
27 #con img
28 {
29 float: left;
30 width: 220px;
31 height: 124px;
32 }
33 input
34 {
35 margin: 30px 150px;
36 width: 50px;
37 height: 50px;
38 color: pink;
39
40 }
41 </style>
42 <body>
43 <div id="all">
44 <div id="con">
45 <img src="img/人物1.jpg" alt="">
46 <img src="img/人物2.jpg" alt="">
47 <img src="img/人物3.jpg" alt="">
48 <img src="img/人物4.jpg" alt="">
49 <img src="img/人物5.jpg" alt="">
50 <img src="img/人物6.jpg" alt="">
51 </div>
52 </div>
53 <input type="button" value="start">
54 <input type="button" value="stop">
55
56 <script>
57 var all=document.getElementById('all');
58 var con=document.getElementById('con');
59 var imgs=con.getElementsByTagName('img');
60 var inp=document.getElementsByTagName('input');
61 var timer=null;
62 con.innerHTML+=con.innerHTML;//实现图片内容的复制
63 function timego () {
64 timer=setInterval(function(){
65 all.scrollLeft+=5;
66 if (all.scrollLeft==imgs[0].offsetWidth*6) {
67 all.scrollLeft=0;
68 };
69 },50);
70 };
71 timego();
72 all.onmouseover=function() {
73 clearInterval(timer);
74 };
75 all.onmouseout=function() {
76 timego();
77 };
78 inp[0].onclick=function() {
79 clearInterval(timer);
80 timego();
81 };
82 inp[1].onclick=function() {
83 clearInterval(timer);
84 };
85 </script>
86 </body>
87 </html>
