计时器——QQ仙灵 

 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>

 

posted @ 2016-08-28 17:56  舍近求猿  阅读(122)  评论(0)    收藏  举报