1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>]
6 <style>
7 *
8 {
9 margin: 0;
10 padding: 0;
11 }
12 #div1
13 {
14 width: 660px;
15 height: 125px;
16 border: 1px solid #ccc;
17 overflow: scroll;
18 margin: 80px auto;
19 }
20 #div2
21 {
22 width: 1500px;
23 height: 124px;
24 overflow: hidden;
25 }
26 #div2 img
27 {
28 width: 220px;
29 height: 124px;
30 float: left;
31 }
32 #div3
33 {
34 text-align: center;
35 }
36 #div3 button
37 {
38 width: 80px;
39 height: 40px;
40 }
41 </style>
42 </head>
43 <body>
44 <div id="div1">
45 <div id="div2">
46 <img src="images/人物1.jpg" alt="">
47 <img src="images/人物2.jpg" alt="">
48 <img src="images/人物3.jpg" alt="">
49 </div>
50 </div>
51 <div id="div3">
52 <button>关闭</button>
53 <button>左转三圈</button>
54 <button>右转三圈</button>
55 </div>
56 <!-- =================================================JS====================================================== -->
57 <script>
58
59 var div1=document.getElementById('div1');
60 var div2=document.getElementById('div2');
61 var imgs=div2.getElementsByTagName('img');
62 var time1=null,time2=null,time3=null,time4=null;
63 var div3=document.getElementById("div3");
64 var bt=div3.getElementsByTagName("button");
65 var a=1;
66 div2.innerHTML+=div2.innerHTML;
67
68 function rightMove() {//图片向左滚动
69 a=1;
70 div1.scrollLeft++;
71 if (div1.scrollLeft>=imgs[0].offsetWidth*3) {
72 div1.scrollLeft=0;
73 };
74 if (div1.scrollLeft%imgs[0].offsetWidth==0) {
75 clearInterval(time1);
76 time2=setTimeout(function() {
77 time1=setInterval(rightMove,20);
78 },1000);
79 };
80 }
81 function leftMove () {//图片向右滚动
82 a=0;
83 div1.scrollLeft--;
84 if (div1.scrollLeft<=0) {
85 div1.scrollLeft=imgs[0].offsetWidth*3;
86 };
87 if (div1.scrollLeft%imgs[0].offsetWidth==0) {
88 clearInterval(time4);
89 time3=setTimeout(function() {
90 time4=setInterval(leftMove,20);
91 },1000);
92 };
93 }
94 div1.onmouseover=function() {
95 clearInterval(time1);
96 clearTimeout(time2);
97 clearInterval(time4);
98 clearTimeout(time3);
99 };
100 div1.onmouseout=function() {
101 if (a) {
102 time1=setInterval(rightMove,20);
103 }else{
104 time4=setInterval(leftMove,20);
105 };
106 };
107 bt[1].onclick=function() {
108 clearInterval(time1);
109 clearTimeout(time2);
110 clearInterval(time4);
111 clearTimeout(time3);
112 time1=setInterval(rightMove,20);
113 };
114 bt[2].onclick=function(){
115 clearInterval(time1);
116 clearTimeout(time2);
117 clearInterval(time4);
118 clearTimeout(time3);
119 time4=setInterval(leftMove,20);
120 };
121 bt[0].onclick=function() {
122 window.close();
123 };
124 </script>
125 </body>
126 </html>
