<title>无标题文档</title> <style> * {margin:0; padding:0;} #div1{width:1172px; height:220px; margin:100px auto; position:relative; background:red; overflow:hidden;} #div1 ul li{float:left;width:293px; height:220px; 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 timer; 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'; }; oDiv.onmouseover=function () { clearInterval(timer); } oDiv.onmouseout=function () { timer=setInterval(move,30); } document.getElementsByTagName('a')[0].onclick=function () { speed=-2; } document.getElementsByTagName('a')[1].onclick=function () { speed=2; } }; </script> </head> <body> <a href="javascript:;">向左滚</a> <a href="javascript:;">向右滚</a> <div id="div1"> <ul style="position:absolute; left:0; top:0;"> <li><img src="images/05.jpg"/></li> <li><img src="images/05.jpg"/></li> <li><img src="images/05.jpg"/></li> <li><img src="images/05.jpg"/></li> </ul> </div> </body>
一开始遇到了个问题，ul的样式是外部样式，所以代码oUl.style.left=oUl.offsetLeft-2+'px'有问题，程序跑不了，style不能取外部样式，谨记！
定时器
开启定时器
setInterval 间隔型
setTimeout 延时型
停止定时器
clearInterval
clearTimeout