圖片的無縫滾動效果

時間 2019-11-11

標籤圖片無縫滾動效果简体版

原文原文鏈接

代碼：html

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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。