效果图：
实现的功能有：1.点击按钮实现换向。2.鼠标放到图片上，轮播停止移动。鼠标离开，轮播继续移动。
<!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} #div2{ width:200px; margin-left:600px;} #div1{ width:928px; height:232px; margin:100px auto; background:red; position:relative; overflow:hidden; } #div1 ul{ position:absolute; left:0; top:0;} #div1 ul li{ float:left; width:232px; height:232px; list-style:none;} </style> </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> <br /> <div id="div2"><input type="button" value="向左走" /> <input type="button" value="向右走" /></div> </body> </html>
js代码：
<script type="text/javascript"> window.onload=function(){ var oDiv=document.getElementById("div1"); var oDiv2=document.getElementById("div2"); 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); } oDiv2.getElementsByTagName('input')[0].onclick=function(){ speed=-2; } oDiv2.getElementsByTagName('input')[1].onclick=function(){ speed=2; } } </script>
通过修改变量speed可以修改轮播的速度。offsetWidth：是获取宽度。offsetLeft:获取左边的距离。