愿我们努力拼搏,征战沙场,不忘初心,努力成为一个浑身充满铜臭味的有钱人。
本文实例为大家分享了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>
本文简单实现js无缝滚动效果到此结束。忌妒别人,不会给自我增加任何的好处。忌妒别人,也不可能减少别人的成就。小编再次感谢大家对我们的支持!