首页 > 代码库 > 图片的无缝滚动效果
图片的无缝滚动效果
代码：
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>
图片的无缝滚动效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。