本文实例为大家分享了js无缝滚动效果的具体代码,供大家参考,具体内容如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } ul{ list-style: none; } img{ vertical-align: top; /*消除3px的距离*/ } .box{ width: 600px; height: 200px; margin: 100px auto; overflow: hidden; position: relative; border: 1px solid red; } ul{ width: 400%; position: absolute; left: 0; top: 0; } ul li{ float: left; } </style> <script> window.onload = function(){ function $(id){ return document.getElementById(id); } var timer = null; var num = 0; timer = setInterval(autoPlay,20); function autoPlay(){ num--; if(num<=-1200){ num = 0; } $("picBox").style.left = num + "px"; } $("picBox").onmouseover = function(){ clearInterval(timer); } $("picBox").onmouseout = function(){ timer = setInterval(autoPlay,20); } } </script> </head> <body> <div class="box" id="scroll"> <ul id="picBox"> <li><img src="images/01.jpg" alt=""></li> <li><img src="images/02.jpg" alt=""></li> <li><img src="images/03.jpg" alt=""></li> <li><img src="images/04.jpg" alt=""></li> <li><img src="images/01.jpg" alt=""></li> <li><img src="images/02.jpg" alt=""></li> </ul> </div> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持亿速云。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。