图片的无缝滚动效果

Posted 初夏的一棵歪脖子树

tags:

篇首语:本文由小常识网(cha138.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

 

以上是关于图片的无缝滚动效果的主要内容,如果未能解决你的问题,请参考以下文章

wpf 一行图片无缝的滚动

轮播图采用jsjquery实现无缝滚动和非无缝滚动的四种案例实现,兼容ie低版本浏览器

JQuery实现文字无缝滚动效果 Marquee插件

marquee滚动,无缝连接的代码

无缝滚动

JavaScript----marquee滚动标签 图片无缝滚动 插入百度地图