<html> <head> <title></title> <style type="text/css"> #test{ width:300px; height:55px; overflow:hidden; position:relative; border:1px solid red; } ul{ margin:0; padding:0; list-style:none; left:0; position:absolute; } li{ float:left; display:block; width:50px; height:50px; border:1px solid black; } </style> <script type="text/javascript"> window.onload=function(){ var oDiv=document.getElementById("test"); var oUl=document.getElementsByTagName("ul")[0]; var oLi=document.getElementsByTagName("li"); var oA=document.getElementsByTagName("a"); var timer=null; var iSpeed=3; oUl.innerHTML+=oUl.innerHTML; oUl.style.width=oLi.length*oLi[0].offsetWidth+'px'; function fnMove(){ if(oUl.offsetLeft<-oUl.offsetWidth/2){ oUl.style.left=0; } else if(oUl.offsetLeft>0){ oUl.style.left=-oUl.offsetWidth/2+'px'; } oUl.style.left=oUl.offsetLeft+iSpeed+'px'; }; timer=setInterval(fnMove,30); oDiv.onmouseover=function(){ clearInterval(timer); }; oDiv.onmouseout=function(){ timer=setInterval(fnMove,30); }; oA[0].onclick=function(){ iSpeed=-3; }; oA[1].onclick=function(){ iSpeed=3; }; }; </script> </head> <body> <a href="####">向左</a> <a href="####">向右</a> <div id="test"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> </ul> </div> </body> </html>