图片的无缝滚动效果

代码：

ps：图片200*200；

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>图片的无缝滚动效果</title>    
 6     <!-- 标题图标 -->
 7     <link rel="shortcut icon" type="image/x-icon" href="1.png">
 8     <style>
 9         body,
10         div,
11         img {
12             margin: 0;
13             padding: 0;
14         }
15         .outer {
16             overflow: hidden;
17             width: 200px;
18             height: 200px;
19             margin: 50px auto;
20         }
21         #inner {
22             width: 2000px;
23             height: 200px;
24         }
25         #inner img {
26             float: left;
27             width: 200px;
28             height: 200px;
29         }
30     </style>
31 </head>
32 <body>
33     <div class="outer" id="outer">
34         <div id="inner">
35             <a href="http:www.baidu.com"><img src="1.png" alt="1"></a>
36             <img src="2.png" alt="2">
37             <img src="3.png" alt="3">
38             <img src="4.png" alt="4">
39             <img src="5.png" alt="5">
40         </div>
41     </div>
42     <script>
43         var outer = document.getElementById('outer');
44         var inner = document.getElementById('inner');
45         inner.innerHTML += inner.innerHTML;
46         function autoscroll(){
47             outer.scrollLeft++;
48             if(outer.scrollLeft == inner.offsetWidth/2){
49                 outer.scrollLeft = 0;                
50             }
51         }
52         // 经过17毫秒后，执行一次autoscroll函数
53         // setInterval(autoscroll,17);
54         // 每经过17毫秒后，执行一次autoscroll函数
55         setInterval(autoscroll,17);
56     </script>
57 </body>
58 </html>

 

posted @ 2016-09-29 19:41  JSKevin  阅读(4795)  评论(0)  编辑  收藏  举报