自学js练手----无缝滚动
<!DOCTYPE html>
<html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0; padding: 0; } #div01{ width: 500px; height: 100px; background: red; position: relative; left: 500px; top: 100px; overflow: hidden; } #div01 ul{ position: absolute; left: 0; top: 0; } #div01 ul li{ float: left; list-style: none; width: 100px; height: 100px; cursor: pointer; } </style> <script type="text/javascript"> window.οnlοad=function(){ var oDiv=document.getElementById("div01"); var oUl=document.getElementById("ul0"); var oLi=document.getElementsByTagName("li"); var speed=2; oUl.innerHTML=oUl.innerHTML+oUl.innerHTML; function move(){ if(oUl.offsetLeft<-oUl.offsetWidth/2){ oUl.style.left=0; } if(oUl.offsetLeft>0){ oUl.style.left=-oUl.offsetWidth/2+"px"; } oUl.style.left=oUl.offsetLeft+speed+"px" } oUl.style.width=oLi[1].offsetWidth*oLi.length+"px"; var mytimer=setInterval(move,30); oDiv.οnmοusemοve=function(){ clearInterval(mytimer); } oDiv.οnmοuseleave=function(){ mytimer=setInterval(move, 30); }; document.getElementsByTagName("a")[0].οnclick=function(){ speed=-2; }; document.getElementsByTagName("a")[1].οnclick=function(){ speed=2; }; } </script></head><body> <a href="javascript:;"> 向左走</a> <a href="javascript:;"> 向右走</a> <div id="div01"> <ul id="ul0"> <li><img src="images/1.jpg"></li> <li><img src="images/2.jpg"></li> <li><img src="images/3.jpg"></li> <li><img src="images/4.jpg"></li> <li><img src="images/5.jpg"></li> </ul> </div></body></html>
图片如下：
