Home > Article > Web Front-end > Detailed explanation of JavaScript seamless scrolling effect example code
This article will share with you a piece of example code about js to achieve seamless scrolling effect. The code is simple and easy to understand, very good, and has reference value. Friends who need it can refer to it
No nonsense Without further ado, I will post the code directly for you. The specific code is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style type="text/css"> * { padding: 0; margin: 0; } .box { width: 600px; height: 200px; margin: 60px auto; overflow: hidden; position: relative; } ul { list-style-type: none; width: 2000px; position: absolute; top: 0; left: 0; } li { float: left; } </style> </head> <body> <p class="box" id="box"> <ul id="gun"> <li><img src="01.jpg" alt="" /></li> <li><img src="02.jpg" alt="" /></li> <li><img src="03.jpg" alt="" /></li> <li><img src="04.jpg" alt="" /></li> <li><img src="01.jpg" alt="" /></li> <li><img src="02.jpg" alt="" /></li> </ul> <script type="text/javascript"> var box = document.getElementById("box"); var gun = document.getElementById("gun"); function $(i){ return document.getElementsByTagName("img")[i]; } var num = 0; all(); function all(){ var shi= setInterval(fun,5); gun.onmouseover=function (){ clearInterval(shi); } gun.onmouseout=function (){ all(); } function fun(){ if(num<=-1200){ num=0; }else{ gun.style.left=num+"px"; num--; } } } </script> </p> </body> </html>
The above is the detailed content of Detailed explanation of JavaScript seamless scrolling effect example code. For more information, please follow other related articles on the PHP Chinese website!