<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>萌宠</title> <style> *{ margin:0px; padding:0px; } #cute { position:relative; 1400px; height:220px; margin-top:100px; margin-left:120px; overflow:hidden; } #cute ul { list-style-type:none; left:0px; top:0px; position:absolute; } #cute ul li { float:left; margin-left:5px; } li img { 270px; height:220px; } #right { float:right; } </style> <script> window.onload=function() { var oCte=document.getElementById('cute'); var oUl=oCte.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+50+'px'; function move() { if (oUl.offsetLeft<-oUl.offsetWidth/2) oUl.style.left='0px'; if (oUl.offsetLeft>0) oUl.style.left=-oUl.offsetWidth/2+'px'; oUl.style.left=oUl.offsetLeft+speed+'px'; } var timer=setInterval(move, 30); oCte.onmouseover=function() { clearInterval(timer); }; oCte.onmouseout=function() { timer=setInterval(move, 30); }; document.getElementById('left').onclick=function() { speed=-2; }; document.getElementById('right').onclick=function() { speed=2; }; }; </script> </head> <body> <div id="left"> <img src="image/left.jpg"/> </div> <div id="cute"> <ul> <li><img src="image/a.jpg"/></li> <li><img src="image/b.jpg"/></li> <li><img src="image/c.jpg"/></li> <li><img src="image/d.jpg"/></li> <li><img src="image/e.jpg"/></li> </ul> </div> <div id="right"> <img src="image/right.jpg"/> </div> </body> </html>