码迷,mamicode.com
首页 > 其他好文 > 详细

图片的无缝滚动效果

时间:2017-07-28 19:29:03      阅读:156      评论:0      收藏:0      [点我收藏+]

标签:动效   settime   short   rtc   bsp   doc   utf-8   ++   .com   

技术分享
 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

 

图片的无缝滚动效果

标签:动效   settime   short   rtc   bsp   doc   utf-8   ++   .com   

原文地址:http://www.cnblogs.com/zclqian/p/7251795.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!