要点：
- 定时器的使用
- 用一个公用的值iNow来确定位置
<!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"> * { padding: 0; margin: 0; } li { list-style: none; } img { border: none; } body { background: #ecfaff; } .play { 470px; height: 150px; overflow: hidden; position: relative; margin: 150px auto 0; } ol { position: absolute; right: 5px; bottom: 5px; z-index: 2; } ol li { float: left; margin-right: 3px; display: inline; cursor: pointer; background: #fcf2cf; border: 1px solid #f47500; padding: 2px 6px; color: #d94b01; font-family: arial; font-size: 12px; } .active { padding: 3px 8px; font-weight: bold; color: #ffffff; background: #ffb442; position: relative; bottom: 2px; } ul { position: absolute; top: 0; left: 0; z-index: 1; } ul li { 470px; height: 150px; float: left; } ul img { float: left; 470px; height: 150px; } </style> <script type="text/javascript"> window.onload=function () { var oDiv = document.getElementById('play'); var oOl = oDiv.getElementsByTagName('ol')[0]; var aBtn = oOl.getElementsByTagName('li'); var oUl = oDiv.getElementsByTagName('ul')[0]; var aLi = oOl.getElementsByTagName('li'); var timer = null; var autoPlaytimer = null; var i=0; var iNow = 0; for(i=0; i<aBtn.length; i++){ aBtn[i].index = i; aBtn[i].onclick = function(){ iNow = this.index; tab(); } } function tab(){ for (i = 0; i < aBtn.length; i++) { aBtn[i].className = ''; } aBtn[iNow].className = 'active'; startMove(-150 * iNow); } function next(){ iNow++; iNow==aBtn.length ? iNow=0: ''; tab(); } autoPlaytimer = setInterval(next, 3000); oDiv.onmouseover = function(){ clearInterval(autoPlaytimer); } oDiv.onmouseout = function(){ autoPlaytimer = setInterval(next, 3000); } function startMove(iTarge){ clearInterval(timer); timer = setInterval(function(){ doMove(iTarge); }, 30); } function doMove(iTarge){ var speed = (iTarge - oUl.offsetTop)/5; speed = speed>0 ? Math.ceil(speed) : Math.floor(speed); oUl.style.top = oUl.offsetTop + speed + 'px'; } }; </script> </head> <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.miaov.com/"><img src="images/1.jpg" alt="广告一" /></a></li> <li><a href="http://www.miaov.com/"><img src="images/2.jpg" alt="广告二" /></a></li> <li><a href="http://www.miaov.com/"><img src="images/3.jpg" alt="广告三" /></a></li> <li><a href="http://www.miaov.com/"><img src="images/4.jpg" alt="广告四" /></a></li> <li><a href="http://www.miaov.com/"><img src="images/5.jpg" alt="广告五" /></a></li> </ul> </div> </body> </html>