这篇文章主要教大家如何简单实现js无缝滚动效果，js轮播图实现方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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> <ul> <li><img src="https://www.jb51.net/images/01.jpg" alt=""></li> <li><img src="https://www.jb51.net/images/02.jpg" alt=""></li> <li><img src="https://www.jb51.net/images/03.jpg" alt=""></li> <li><img src="https://www.jb51.net/images/04.jpg" alt=""></li> <li><img src="https://www.jb51.net/images/01.jpg" alt=""></li> <li><img src="https://www.jb51.net/images/02.jpg" alt=""></li> </ul> </div> </body> </html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章: