另一个无缝滚动轮播，带暂停，由于js是异步，用C面向过程的思想开始会很怪异很怪异，因为当你定时器里面需要执行的函数时间比较长或是有一段延时时，异步的代码会完全不同，但习惯就好了。
这个代码有几个问题，后续会优化：
1、由于css定位margin的问题，并非几张轮播的图片移动的距离一致，故而你会看到两个很冗余的if代码，那个判断都固定死了
2、这种定时器嵌套理解起来比较容易，但有一个较大的问题是：当执行到setTimeout时，你会发现鼠标移入移出暂停轮播的效果失效，因为这是程序执行的是一段空的延时，才会出现这样
3、要实现带暂停的轮播，上面有这两个缺陷，用户体验会有一丢丢不perfect，当然有更好更高级的方式实现，这里就当做自己刚入门的一段回忆好了。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js-text</title> <style> html,body,div,ul,li{margin:0;padding:0} .div11{width:895px;height:165px;margin:300px auto 0;position:relative;border-radius:10px; overflow:hidden} #div1 ul{position:absolute;left:0;top:0;} #div1 ul li{width:220px;height:165px;float:left;list-style:none;margin:0 2px;} #div1 ul img{width:220px;height:165px;border-radius:10px;} /*#div1 img{33px;height:33px;}*/ .cDirection {width:955px;height:30px;margin:0 auto;} .cDirection img{width:30px;height:30px;} .cDirection .right{float:right} body{background:url("images/background2.jpg")} </style> <script> window.onload=function (){ var oDiv1=document.getElementById('div1'); var oDiv2=document.getElementById('direction'); var oUl=oDiv1.getElementsByTagName('ul')[0]; var oLi=oDiv1.getElementsByTagName('li'); var oA=oDiv2.getElementsByTagName('a'); var nSpeed=2; var time; var flag=0; oUl.style.width=(oLi[0].offsetWidth+4)*oLi.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+nSpeed+'px'; // console.log(oUl.offsetLeft); } var lunBo=function(){ clearInterval(time); time=setInterval(function(){ move(); // if((oUl.offsetLeft)%(oLi[0].offsetWidth+nSpeed)==0&&oUl.offsetLeft!=-888) if((oUl.offsetLeft==-670||oUl.offsetLeft==-446||oUl.offsetLeft==-222||oUl.offsetLeft==0)&&nSpeed==2) { clearInterval(time); setTimeout(function(){ lunBo(); },1000); } if((oUl.offsetLeft==-670||oUl.offsetLeft==-446||oUl.offsetLeft==-222||oUl.offsetLeft==-894)&&nSpeed==-2) { clearInterval(time); setTimeout(function(){ lunBo(); },1000); } },10); }; // var newLunBo=new lunBo(); lunBo(); oDiv1.onmouseover=function (){clearInterval(time)}; oDiv1.onmouseout=function (){lunBo()}; oA[0].onmouseover=function (){nSpeed=-2}; oA[1].onmouseover=function (){nSpeed=2}; }; </script> </head> <body> <div class="div11" id="div1"> <ul> <li><a href="javascript:"><img src="images/picture1.png" alt="1"></a></li> <li><a href="javascript:"><img src="images/picture2.png" alt="2"></a></li> <li><a href="javascript:"><img src="images/picture3.png" alt="3"></a></li> <li><a href="javascript:"><img src="images/picture4.png" alt="4"></a></li> <li><a href="javascript:"><img src="images/picture1.png" alt="1"></a></li> <li><a href="javascript:"><img src="images/picture2.png" alt="2"></a></li> <li><a href="javascript:"><img src="images/picture3.png" alt="3"></a></li> <li><a href="javascript:"><img src="images/picture4.png" alt="4"></a></li> </ul> </div> <div class="cDirection" id="direction"> <a href="javascript:"><img src="images/left1.png" alt=""></a> <a class="right" href="javascript:"><img src="images/right1.png" alt=""></a> </div> </body> </html>