图片的无缝滚动效果 

 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>
View Code

 

posted @ 2017-07-28 18:14  初夏的一棵歪脖子树  阅读(152)  评论(0)    收藏  举报