<div id="demo" style="overflow:hidden;height:300;width:100%;"> 
<div id="demo1">
<img src="images/02.gif"><br>
<img src="images/02.gif"><br>
<img src="images/02.gif"><br>
<img src="images/02.gif"><br>
<img src="images/02.gif"><br>
<img src="images/02.gif"><br>
<img src="images/02.gif"><br>
<img src="images/02.gif"><br>
<img src="images/02.gif"><br>
<img src="images/02.gif"><br>
</div>
<div id="demo2"></div>
</div>
<script language="javascript">
var speed=30;
var TopMyMar;
var DownMyMar

function   MarqueeTop()
{
clearInterval(DownMyMar)
demo2.innerHTML=demo1.innerHTML
function Marquee()
{
 if(demo2.offsetTop-demo.scrollTop<=0)
  demo.scrollTop-=demo1.offsetHeight;
 else
  demo.scrollTop++;
}
TopMyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(TopMyMar)}
demo.onmouseout=function() {TopMyMar=setInterval(Marquee,speed)}
}
MarqueeTop();

function  MarqueeDown()
{
clearInterval(TopMyMar)

demo2.innerHTML=demo1.innerHTML //复制层的内容
demo.scrollTop=demo.scrollHeight 

function Marquee(){ 
if(demo1.offsetTop-demo.scrollTop>=0) 
demo.scrollTop+=demo2.offsetHeight 
else{ 
demo.scrollTop-- 
} 
} 
DownMyMar=setInterval(Marquee,speed) 
demo.onmouseover=function() {clearInterval(DownMyMar)} 
demo.onmouseout=function() {DownMyMar=setInterval(Marquee,speed)} 

}
</script>
<a href="#" onClick="MarqueeTop()">向上</a> <a href="#" onClick="MarqueeDown()">向下</a>