向上：程序代码

<div id=demo style="overflow:hidden; width:400px; height:300px;">
<div id=demo1>
<img src="http://www.hkrenan.com/upload_files/article/7/1_20100430150412_b7umf.jpg"><br>
<img src="http://www.hkrenan.com/upload_files/article/7/1_20100430150412_b7umf.jpg"><br>
<img src="http://www.hkrenan.com/upload_files/article/7/1_20100430150412_b7umf.jpg"><br>
<img src="http://www.hkrenan.com/upload_files/article/7/1_20100430150412_b7umf.jpg"><br>
<img src="http://www.hkrenan.com/upload_files/article/7/1_20100430150412_b7umf.jpg"><br>
<img src="http://www.hkrenan.com/upload_files/article/7/1_20100430150412_b7umf.jpg"><br>
</div>
<div id=demo2></div>
</div>
<script language="javascript">
var speed=30
var demo=document.getElementById("demo");
var demo2=document.getElementById("demo2");
var demo1=document.getElementById("demo1");
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight
else{
demo.scrollTop++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>

向下：程序代码
<div id=demodown style="overflow:hidden; width:400px; height:300px;">
<div id=demodown1> 
<img src="http://www.hkrenan.com/upload_files/article/7/1_20100430150412_b7umf.jpg"><br>
<img src="http://www.hkrenan.com/upload_files/article/7/1_20100430150412_b7umf.jpg"><br>
<img src="http://www.hkrenan.com/upload_files/article/7/1_20100430150412_b7umf.jpg"><br>

<img src="http://www.hkrenan.com/upload_files/article/7/1_20100430150412_b7umf.jpg"><br>

<img src="http://www.hkrenan.com/upload_files/article/7/1_20100430150412_b7umf.jpg"><br>

<img src="http://www.hkrenan.com/upload_files/article/7/1_20100430150412_b7umf.jpg"><br>
</div>
<div id=demodown2></div>
</div>
<script language="javascript">
var speed=30 
var demodown=document.getElementById("demodown");
var demodown2=document.getElementById("demodown2");
var demodown1=document.getElementById("demodown1");
demodown2.innerHTML=demodown1.innerHTML
demodown.scrollTop=demodown.scrollHeight
function Marquee(){
if(demodown1.offsetTop-demodown.scrollTop>=0)
demodown.scrollTop+=demodown2.offsetHeight
else{
demodown.scrollTop--
}
}
var MyMar=setInterval(Marquee,speed)
demodown.onmouseover=function() {clearInterval(MyMar)}
demodown.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>

向左：程序代码
<div id=demoleft style="overflow:hidden;height:400px;width:300px;"><table align=left
cellpadding=0 cellspace=0 border=0><tr><td id=demoleft1 valign=top>
<img src="http://www.hkrenan.com/upload_files/article/7/1_20100430150412_b7umf.jpg"><br>
<img src="http://www.hkrenan.com/upload_files/article/7/1_20100430150412_b7umf.jpg"><br>
<img src="http://www.hkrenan.com/upload_files/article/7/1_20100430150412_b7umf.jpg"><br>

<img src="http://www.hkrenan.com/upload_files/article/7/1_20100430150412_b7umf.jpg"><br>

<img src="http://www.hkrenan.com/upload_files/article/7/1_20100430150412_b7umf.jpg"><br>

<img src="http://www.hkrenan.com/upload_files/article/7/1_20100430150412_b7umf.jpg"><br>
</td><td id=demoleft2 valign=top></td></tr></table></div>
<script>
var speed=30 
var demoleft=document.getElementById("demoleft");
var demoleft2=document.getElementById("demoleft2");
var demoleft1=document.getElementById("demoleft1");
demoleft2.innerHTML=demoleft1.innerHTML
function Marquee(){
if(demoleft2.offsetWidth-demoleft.scrollLeft<=0)
demoleft.scrollLeft-=demoleft1.offsetWidth
else{
demoleft.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
demoleft.onmouseover=function() {clearInterval(MyMar)}
demoleft.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>

向右：程序代码
<div id=demoright style="overflow:hidden;height:300px;width:400px;"><table align=left
cellpadding=0 cellspace=0 border=0><tr><td id=demoright1 valign=top> 
<img src="http://www.hkrenan.com/upload_files/article/7/1_20100430150412_b7umf.jpg"><br>
<img src="http://www.hkrenan.com/upload_files/article/7/1_20100430150412_b7umf.jpg"><br>
<img src="http://www.hkrenan.com/upload_files/article/7/1_20100430150412_b7umf.jpg"><br>

<img src="http://www.hkrenan.com/upload_files/article/7/1_20100430150412_b7umf.jpg"><br>

<img src="http://www.hkrenan.com/upload_files/article/7/1_20100430150412_b7umf.jpg"><br>

<img src="http://www.hkrenan.com/upload_files/article/7/1_20100430150412_b7umf.jpg"><br>
</td><td id=demoright2 valign=top></td></tr></table></div>
<script>
var speed=30 
var demoright=document.getElementById("demoright");
var demoright2=document.getElementById("demoright2");
var demoright1=document.getElementById("demoright1"); 
demoright2.innerHTML=demoright1.innerHTML
demoright.scrollLeft=demoright.scrollWidth
function Marquee(){
if(demoright.scrollLeft<=0)
demoright.scrollLeft+=demoright2.offsetWidth
else{
demoright.scrollLeft--
}
}
var MyMar=setInterval(Marquee,speed)
demoright.onmouseover=function() {clearInterval(MyMar)}
demoright.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>