效果图如下：
代码：
<!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 type="text/css"> *{ margin:0; padding:0;} #imgMove{ height:205px; width:624px; border:#000 1px solid; position:relative; margin:200px auto;overflow:hidden;} #imgMove ul{ height:205px;position:absolute; left:0; overflow:hidden;} #imgMove li{ list-style:none; float:left; height:205px; width:156px; margin:0;} a img,img{ border:none;} span{ z-index:999;height:68px; width:68px; display:none;position:absolute; cursor:pointer;} #moveLeft{left:0; top:68px; } #moveRight{right:-10px; top:68px;} </style> <script type="text/javascript"> window.οnlοad=function(){ var oDiv=document.getElementById('imgMove'); var oUl=oDiv.getElementsByTagName('ul')[0]; var oli=oUl.getElementsByTagName('li'); var liSpeed=1; var ospan=oDiv.getElementsByTagName('span'); var rightmove=document.getElementById('moveRight'); var leftmove=document.getElementById('moveLeft'); function show(){ ospan[0].style.display="block"; ospan[1].style.display="block"; } oUl.οnmοuseοver=function (){ show(); } oUl.οnmοuseοut=function(){ ospan[0].style.display="none"; ospan[1].style.display="none"; } ospan[0].οnmοuseοver=function(){ liSpeed=1; show();/*加这个函数是为了去除向左向右的图片闪动*/ } ospan[1].οnmοuseοver=function(){ liSpeed=-1; show();/*加这个函数是为了去除向左向右的图片闪动*/ } oUl.style.width=oli[0].offsetWidth*oli.length+'px';; setInterval(function(){ oUl.style.left=oUl.offsetLeft-liSpeed+'px'; if(oUl.offsetLeft<-oUl.offsetWidth/2){ oUl.style.left=0; } else if(oUl.offsetLeft>0) { oUl.style.left=-oUl.offsetWidth/2+'px'; } },30) } </script> </head> <body> <div id="imgMove"> <ul> <li><a href="#"><img src="images/1.png" /></a></li> <li><a href="#"><img src="images/2.png" /></a></li> <li><a href="#"><img src="images/3.png" /></a></li> <li><a href="#"><img src="images/4.png" /></a></li> <li><a href="#"><img src="images/1.png" /></a></li> <li><a href="#"><img src="images/2.png" /></a></li> <li><a href="#"><img src="images/3.png" /></a></li> <li><a href="#"><img src="images/4.png" /></a></li> </ul> <span id="moveLeft"><img src="images/left.png" /></span> <span id="moveRight"><img src="images/right.png" /></div> </div> </body> </html>