类似与无缝滚动；上下滑动的是整个ul标签，是ul的top距离与图片序号之前的关系；
当显示第1章图片，top为：图片高度-height*0;
2章 -height*1;
3 -height*2;
n -height*(n-1);
<script src="../move2.js"></script> <script> window.onload=function () { var oDiv=document.getElementById('play'); var aBtn=oDiv.getElementsByTagName('ol')[0].getElementsByTagName('li'); var oUl=oDiv.getElementsByTagName('ul')[0]; var now=0; for(var i=0;i<aBtn.length;i++) { aBtn[i].index=i; aBtn[i].onclick=function () { now=this.index; tab(); }; } function tab() { for(var i=0;i<aBtn.length;i++) { aBtn[i].className=''; } aBtn[now].className='active'; startMove(oUl, {top: -150*now}); } function next() { now++; if(now==aBtn.length) { now=0; } tab(); } var timer=setInterval(next, 2000); oDiv.onmouseover=function () { clearInterval(timer); }; oDiv.onmouseout=function () { timer=setInterval(next, 2000); }; }; </script>
<body> <div class="play" id="play"> <ol> <li class="active">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ol> <ul> <li><a href="http://www.zhinengshe.com/"><img src="images/1.jpg" alt="广告一" /></a></li> <li><a href="http://www.zhinengshe.com/"><img src="images/2.jpg" alt="广告二" /></a></li> <li><a href="http://www.zhinengshe.com/"><img src="images/3.jpg" alt="广告三" /></a></li> <li><a href="http://www.zhinengshe.com/"><img src="images/4.jpg" alt="广告四" /></a></li> <li><a href="http://www.zhinengshe.com/"><img src="images/5.jpg" alt="广告五" /></a></li> </ul> </div> </body>