html代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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>文字或圖片上下滾動</title>
<style type="text/css">
ul{height:210px;overflow:hidden;}
li{line-height:20px;}
</style>
</head>
<body>
<ul id="marquee">
<li>1111111111</li>
<li>2222222222</li>
<li>3333333333</li>
<li>4444444444</li>
<li>5555555555</li>
<li>6666666666</li>
<li>7777777777</li>
<li>8888888888</li>
<li>9999999999</li>
<li>0000000000</li>
</ul>
</body>
</html>
<script type="text/javascript" src="marquee.js"></script>
<script type="text/javascript">
window.onload = function() {
setTimeout("startmarquee(34, 50, 0, 'marquee')", 4000);
}
</script>js代碼如下：
function startmarquee(lh,speed,delay,id) {
var t;
var p = false;
var o = document.getElementById(id);
o.innerHTML += o.innerHTML + o.innerHTML + o.innerHTML;
o.onmouseover = function() {
p = true;
}
o.onmouseout = function() {
p = false;
}
o.scrollTop = 0;
function start() {
t = setInterval(scrolling,speed);
if(!p) o.scrollTop += 2;
}
function scrolling() {
if(o.scrollTop%lh != 0) {
o.scrollTop += 2;
if(o.scrollTop >= o.scrollHeight / 2) o.scrollTop = 0;
} else {
clearInterval(t);
setTimeout(start,delay);
}
}
setTimeout(start,delay);
}參數說明：
lh = line-height 即滾動高度
speed = 滾動速度，數值越小，滾動越快
delay = 多少時間後開始滾動，0爲立即滾動，1000爲1秒後開始滾動
id = 滾動容器的id名稱
PS：圖片滾動的話，把文字替換爲圖片即可（<img src="../images/xxx.jpg" width="100" height="100" alt="" />）
最後需要注意的是：一定要給滾動容器加上固定高度，否則文字不會滾動，即便容器外層div有高度。