标签：image javascrip mouseover function asc hid position char setw
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{margin:0; padding: 0; } #div1{ width:1320px; height:213px; margin:100px auto; position: relative; background: red; overflow: hidden; } #div1 ul{ position: absolute; left:0; top:0; } #div1 ul li{ float: left; width:330px; height:213px; list-style: none; } </style> <script> window.onload=function(){ var oDiv=document.getElementById(‘div1‘); var oUl=oDiv.getElementsByTagName(‘ul‘)[0] var aLi=oUl.getElementsByTagName(‘li‘); var speed=2; oUl.innerHTML=oUl.innerHTML+oUl.innerHTML; oUl.style.width=aLi[0].offsetWidth*aLi.length+‘px‘; 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‘; } var timer=setInterval(move,30); oDiv.onmouseover=function(){ clearInterval(timer); }; oDiv.onmouseout=function(){ timer=setInterval(move,30); } } </script> </head> <body> <div id="div1"> <ul> <li><img src="img/1.jpg"/></li> <li><img src="img/2.jpg"/></li> <li><img src="img/3.jpg"/></li> <li><img src="img/4.jpg"/></li> </ul> </div> </body> </html>
标签：image javascrip mouseover function asc hid position char setw
原文地址：http://www.cnblogs.com/Yimi/p/6043988.html
