实现代码：
HTML+CSS:
<!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" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style> *{margin: 0px;padding: 0px;} body{background-color: #eee;padding: 100px;} a{text-decoration: none;} b{display: block;height: 40px;width: 40px;line-height: 40px;border-radius: 40px;background-color: #117b1c;color: #fff;text-align: center;cursor: pointer;} #box{position: relative;height: 312px;width: 92px;padding: 10px;border: 1px solid #ccc;overflow: hidden;} #box ul{position: absolute;top: 0;left: 0;} #box ul li{list-style: none;height: 100px;width: 100px;padding: 5px;} #box ul li a{display: block;width: 100px;height: 100px;border: 1px solid #000;} #box ul li.no1 a{background-color: #99CC33;} #box ul li.no2 a{background-color: #FF6666;} #box ul li.no3 a{background-color: #336699;} #box ul li.no4 a{background-color: #99CCCC;} </style> </head> <body> <b>↑</b> <div id="box"> <ul> <li class="no1"><a href="javascript:;'">111</a></li> <li class="no2"><a href="javascript:;'">222</a></li> <li class="no3"><a href="javascript:;'">333</a></li> <li class="no4"><a href="javascript:;'">444</a></li> </ul> </div> <b>↓</b> </body> </html>
js:
<script> window.onload=function(){ var oBox = document.getElementById('box'); var oUl = oBox.getElementsByTagName('ul')[0]; var aLi = oUl.getElementsByTagName('li'); var aBtn = document.getElementsByTagName('b'); var timer = null; var iSpeed = -5; oUl.innerHTML+=oUl.innerHTML; aBtn[0].onmousedown=function(){ iSpeed = -5; timer = setInterval(doMove,30); }; aBtn[0].onmouseup=function(){ clearInterval(timer); }; aBtn[1].onmousedown=function(){ iSpeed = 5; timer = setInterval(doMove,30); }; aBtn[1].onmouseup=function(){ clearInterval(timer); }; function doMove(){ oUl.style.top = oUl.offsetTop + iSpeed +'px'; if(oUl.offsetTop < -oUl.offsetHeight/2){ oUl.style.top = '0'; } else if(oUl.offsetTop > 0){ oUl.style.top = -oUl.offsetHeight/2 + 'px'; } }; } </script>
效果如下图所示：
