效果：
代碼：
<html>
<head>
<title>循環滾動 [2WorkRoom3]</title>
</head>
<body>
<!-- 循環滾動： 用於視圖窗口不能全部顯示信息列表，只能顯示部分信息列表 -->
<!-- 視窗：以id爲marquees的div作爲視圖窗口 -->
<div id="marquees" style="border: 1px red solid">
1、<br/>
2、<br/>
3、<br/>
4、<br/>
5、<br/>
6、<br/>
7、<br/>
8、<br/>
9、<br/>
10、<br/>
11、<br/>
12、<br/>
13、<br/>
14、<br/>
15、<br/>
16、<br/>
17、<br/>
18、<br/>
19、<br/>
20、<br/>
</div>
<script type="text/javascript">
<!--
/// 視窗寬高數值
var marqueesWidth = 100;
var marqueesHeight = 200;
var stopscroll = false; // 是否停止標誌；
/// 視窗設置： 爲id爲marquees的div進行設值
with(marquees){
/// 設值視窗寬高
style.width=marqueesWidth;
style.height=marqueesHeight;
style.overflowY="hidden"; // Y軸超出隱藏；
/// 懸浮停止
onmouseover = new Function("stopscroll=true"); // 停止；
onmouseout = new Function("stopscroll=false"); // 滾動；
}
// 臨時div
document.write('<div id="templayer" style="position: absolute; z-index: 1; visibility: hidden;"></div>');
// 初始化函數
function init() {
templayer.innerHTML = "";
while(templayer.offsetHeight < marqueesHeight) { // 沒有內容；
templayer.innerHTML += marquees.innerHTML; // 轉存內容；
}
// 信息列表：兩倍內容，實現循環滾動效果
marquees.innerHTML = templayer.innerHTML + templayer.innerHTML;
// 循環滾動
setInterval("scrollup()", 50);
}
//滾值標誌；
var preTop = 0;
// 滾動函數
function scrollup() {
if(stopscroll == true){ // 停止滾動；
return;
}
preTop = marquees.scrollTop; // 記住原來滾值；
marquees.scrollTop += 1; // 滾值加1，類似垂直滾動條向下1；
console.log("preTop_" + preTop + " ;marquees.scrollTop_" + marquees.scrollTop + "; ");
if(preTop == marquees.scrollTop){ // 滾動到底部後，scrollTop值不會再變；
alert("preTop_" + preTop + " ;marquees.scrollTop_" + marquees.scrollTop + "; ");
/// 跳轉到：內容高度 減去 視窗高度，再增加scollTop值，繼續往下，實現滾動效果；
marquees.scrollTop = templayer.offsetHeight - marqueesHeight;
marquees.scrollTop += 1;
}
}
// 開始
init();
//-->
</script>
</body>
</html>