直接上源碼啦：
<!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=gb2312" />
<title>滾動板</title>
<style type="text/css">
/* 初始化 */
body {
font: 12px/1 "宋體", SimSun, serif;
background:#fff;
color:#000;
}
/*核心是 position:relative;，才能讓其內部的 ul 以絕對定位，通過改變 top 值實現向上移位置。*/
.scrollUl {
overflow:hidden;
position:relative;
}
/*演示多個滾動板同時使用，這裏是統一按每行按 20px 高，第一個每屏 4 行，第 2 個每屏 6 行。其實每組中行高也可不同。滾動速度與具體行高無關。*/
#scrollUlTest1 {height:80px;}
#scrollUlTest2 {height:120px;}
/* 清除瀏覽器默認的margin和padding值 */
.scrollUl ul, .scrollUl li {
margin:0;
padding:0;
list-style:none outside; /* 清除瀏覽器中列表項默認的佔位 */
}
.scrollUl ul {
position:absolute;
}
.scrollUl li {
height:20px;
}
</style>
<script type="text/javascript" language="javascript">
<!--
/*
通用滾動板
2009-9-9 15:16:13
作者：雪峯
歡迎轉載使用，請包含此段完整說明。
*/
//最後每屏高度 heightView 和要移動的 ul 節點都改用上級範圍內的變量，從而 scrollView 函數不用傳參數了，這樣在 setTimeout 時就可以更簡便地用 setTimeout(scrollView, duration);而不再用套層匿名函數了。
/**
containerId 滾動板外層節點的 ID
numViews 分幾屏滾動，需要滾動顯示的總行數應該是分屏數的整倍數。
showTime 每屏固定住時顯示的時間，單位毫秒
scrollTime 每次滾動一屏用的時間，單位毫秒
*/
var ScrollUl=function(containerId, numViews, showTime, scrollTime)
{
//定時器變量，因爲有移到層上時停止滾動的事件處理，而那時可能還沒開始定時器呢，所以先把這個變量聲明出來。
this.timer=null;
this.numViews = numViews;
this.showTime = showTime;
this.scrollTime = scrollTime;
this.container = document.getElementById(containerId);
var ulChild = this.container.getElementsByTagName('ul');
//這裏只有一個 ul 節點，取得它
var ul = ulChild[0];
//ul 是未使用 CSS 明確指定高度的，IE 中用 realstyle 取不到高度，只能得到 auto，而 getBoundingClientRect() 是 IE 和 FF 都支持的方式。
var rect = ul.getBoundingClientRect();
var heightAll = rect.bottom - rect.top;
//每一屏的實際像素高度
var heightView = heightAll / this.numViews;
//每移動1像素用的毫秒數
var msPerPx = this.scrollTime / heightView;
//複製出一份來，接在原塊的後面，用於頭接尾的顯示
var ulCopy = ul.cloneNode(true);
ulCopy.style.top = heightAll+'px';
this.container.appendChild(ulCopy);
//要在事件處理函數中使用當前類，得把 this 賦值給一個此範圍的變量，如 itself。其實此範圍內的變量都是直接可用的，如：heightView， msPerPx
var itself = this;
//向上滾動的函數
var scrollView = function()
{
var oldTop = (''==ul.style.top) ? 0: parseInt(ul.style.top) ;
//移動到頂後，把位置復原，兩個塊繼續從 0 開始向上移。
if (oldTop < -heightAll)
{
oldTop = 0;
}
ul.style.top = (oldTop - 1) +'px';
ulCopy.style.top = (oldTop + heightAll- 1) +'px';
//每滾一整屏多停一會。oldTop-1 是爲了讓其停在整數位置。
var duration = (0 == ((oldTop-1) % heightView)) ? itself.showTime:msPerPx;
itself.timer = setTimeout(scrollView, duration);
};
//把 slide 定義爲 prototype 的方法時，似乎這樣 setTimeout(itself.slide, itself.showTime); 定時操作不靈，而只能是局部函數才能定時操作，如果帶參數，還得封裝成匿名函數：
itself.timer = setTimeout(scrollView, itself.showTime);
//鼠標移上時停止滾動
this.container.onmouseover = function()
{
window.clearTimeout(itself.timer);
};
//鼠標移開時繼續滾動，不用區分當時是在整屏停止還是滾動中了，全都按靜止時間來延時就得了。
this.container.onmouseout = function()
{
itself.timer = setTimeout(scrollView, itself.showTime);
};
};
window.onload = function()
{
//第一個總共 20 行，每次顯示 4 行，分 5 屏
var s1 = new ScrollUl('scrollUlTest1', 5, 2000, 1000);
//第二個總共 18 行，每次顯示 6 行，分 3 屏
var s2 = new ScrollUl('scrollUlTest2', 3, 3000, 2000);
};
-->
</script>
</head>
<body>
<h1>通用滾動板演示</h1>
<h4>第1組</h4>
<div class="scrollUl" id="scrollUlTest1">
<ul>
<li>第 1 條內容</li>
<li>第 2 條內容</li>
<li>第 3 條內容</li>
<li>第 4 條內容</li>
<li>第 5 條內容</li>
<li>第 6 條內容</li>
<li>第 7 條內容</li>
<li>第 8 條內容</li>
<li>第 9 條內容</li>
<li>第 10 條內容</li>
<li>第 11 條內容</li>
<li>第 12 條內容</li>
<li>第 13 條內容</li>
<li>第 14 條內容</li>
<li>第 15 條內容</li>
<li>第 16 條內容</li>
<li>第 17 條內容</li>
<li>第 18 條內容</li>
<li>第 19 條內容</li>
<li>第 20 條內容</li>
</ul>
</div>
<br /><br /><br /><br /><br /><br />
<h4>第2組</h4>
<div class="scrollUl" id="scrollUlTest2">
<ul>
<li>第 1 條內容</li>
<li>第 2 條內容</li>
<li>第 3 條內容</li>
<li>第 4 條內容</li>
<li>第 5 條內容</li>
<li>第 6 條內容</li>
<li>第 7 條內容</li>
<li>第 8 條內容</li>
<li>第 9 條內容</li>
<li>第 10 條內容</li>
<li>第 11 條內容</li>
<li>第 12 條內容</li>
<li>第 13 條內容</li>
<li>第 14 條內容</li>
<li>第 15 條內容</li>
<li>第 16 條內容</li>
<li>第 17 條內容</li>
<li>第 18 條內容</li>
</ul>
</div>
</body>
</html>
