向上滾動的代碼：
<div id=demo style=overflow:hidden;height:250;width:200;background:#009900;color:#006600>
<table align=top>
<tr>
<td id=demo1 valign=top>
<img src="images/001.jpg" width="200" height="150" />
<img src="images/002.jpg" width="200" height="150" />
<img src="images/003.jpg" width="200" height="150" />
<img src="images/004.jpg" width="200" height="150" />
<img src="images/005.jpg" width="200" height="150" />
<img src="images/006.jpg" width="200" height="150" />
<img src="images/007.jpg" width="200" height="150" /> </td></tr><tr><td id=demo2 valign=top>
</td></tr></table></div>
<script>
var speed=15
demo2.innerHTML=demo1.innerHTML//克隆demo1為demo2
function Marquee(){
if(demo2.offsetHeight-demo.scrollTop<=0)//當(dāng)滾動至demo1與demo2交界時
demo.scrollTop-=demo1.offsetHeight//demo跳到最頂端
else{
demo.scrollTop++
}
}
var MyMar=setInterval(Marquee,speed)//設(shè)置定時器
demo.onmouseover=function() {clearInterval(MyMar)}//鼠標(biāo)移上時清除定時器達(dá)到滾動停止的目的
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}//鼠標(biāo)移開時重設(shè)定時器
</script>
--------------------------------------------------------------------------------
向下滾動：
<div id=demo style=overflow:hidden;height:250;width:200;background:#009900;color:#006600>
<table align=top cellpadding=0 cellspace=0 border=0>
<tr><td id=demo1 valign=top>
<img src="images/001.jpg" width="200" height="150" />
<img src="images/002.jpg" width="200" height="150" />
<img src="images/003.jpg" width="200" height="150" />
<img src="images/004.jpg" width="200" height="150" />
<img src="images/005.jpg" width="200" height="150" />
<img src="images/006.jpg" width="200" height="150" />
<img src="images/007.jpg" width="200" height="150" /> </td></tr><tr><td id=demo2 valign=top></td></tr></table></div>
<script>
var speed=15
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo.scrollTop<=0)
demo.scrollTop+=demo2.offsetHeight
else{
demo.scrollTop--
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
向左滾動：
<div id="demo" style="overflow:hidden;height:160;width:400;background:#009900;color:#006600;">
<table align=left >
<tr>
<td id=demo1 valign="middle">
<table align="center" >
<tr>
<td align="center" valign="middle">
<img src="images/001.jpg" width="200" height="150" />
</td>
<td align="center" valign="middle">
<img src="images/002.jpg" width="200" height="150" />
</td>
<td align="center" valign="middle">
<img src="images/003.jpg" width="200" height="150" />
</td>
<td align="center" valign="middle">
<img src="images/004.jpg" width="200" height="150" />
</td>
<td align="center" valign="middle">
<img src="images/005.jpg" width="200" height="150" />
</td>
<td align="center" valign="middle">
<img src="images/006.jpg" width="200" height="150" />
</td>
<td align="center" valign="middle">
<img src="images/007.jpg" width="200" height="150" />
</td>
</tr></table>
</td><td id=demo2 valign=top></td></tr></table></div>
<script>
var speed=15
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{demo.scrollLeft++}}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
--------------------------------------------------------------------------------
向右滾動：
<div id=demo style=overflow:hidden;height:160;width:400;background:#009900;color:#000000>
<table align=left cellpadding=0 cellspace=0 border=0>
<tr>
<td id=demo1 valign="middle">
<table align="center" >
<tr>
<td align="center" valign="middle">
<img src="images/001.jpg" width="200" height="150" />
</td>
<td align="center" valign="middle">
<img src="images/002.jpg" width="200" height="150" />
</td>
<td align="center" valign="middle">
<img src="images/003.jpg" width="200" height="150" />
</td>
<td align="center" valign="middle">
<img src="images/004.jpg" width="200" height="150" />
</td>
<td align="center" valign="middle">
<img src="images/005.jpg" width="200" height="150" />
</td>
<td align="center" valign="middle">
<img src="images/006.jpg" width="200" height="150" />
</td>
<td align="center" valign="middle">
<img src="images/007.jpg" width="200" height="150" />
</td>
</tr></table> </td><td id=demo2 valign=top></td></tr></table></div>
<script>
var speed=15
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo.scrollLeft<=0)
demo.scrollLeft+=demo2.offsetWidth
else{
demo.scrollLeft--
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
