图片的无缝滚动效果
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>
以上是关于图片的无缝滚动效果的主要内容，如果未能解决你的问题，请参考以下文章