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="img/01.PNG">
8 <style>
9 body,
10 div,
11 img {
12 margin: 0;
13 padding: 0;
14 }
15 .outer {
16 overflow: hidden;
17 width: 500px;
18 height: 350px;
19 margin: 50px auto;
20 }
21 #inner {
22 width: 4030px;
23 height: 200px;
24 }
25 #inner img {
26 float: left;
27 width: 500px;
28 height: 350px;
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="../images/01.PNG" alt="1"></a>
36 <img src="../images/02.PNG" alt="2">
37 <img src="../images/06.PNG" alt="3">
38 <img src="../images/04.PNG" alt="4">
39 <img src="../images/07.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 // setTimeout(autoscroll,17);
54 // 每经过17毫秒后，执行一次autoscroll函数
55 setInterval(autoscroll,17);
56 </script>
57 </body>
58 </html>
