怎么实现图片的滚动

<div id="ess_ctr1501_ModuleContent"><span class="Normal" id="ess_ctr1501_HtmlModule_HtmlHolder">
<DIV id="demo" style="OVERFLOW: hidden; WIDTH: 770px; HEIGHT: 120px" align="center">
<TABLE cellSpacing="0" cellPadding="0" width="100%" align="center" border="0" cellspace="0">
<TBODY>
<TR>
<TD id="demo1" width="100%" height="120">
<!--图片列表开始-->

<TABLE cellPadding="0" width="100%" align="center" border="0" cellspace="0" cellspacing="0">
<TR>

<td align="center" valign="top">
<a href='' target="_blank" title=''>
<img src='UploadPhoto/xz11.bmp' height="100" width="130" border="0"></a>
</td>

<td align="center" valign="top">
<a href='' target="_blank" title=''>
<img src='UploadPhoto/DSC_2668-2.jpg' height="100" width="130" border="0"></a>
</td>

<td align="center" valign="top">
<a href='' target="_blank" title=''>
<img src='UploadPhoto/Image/2.gif' height="100" width="130" border="0"></a>
</td>

<td align="center" valign="top">
<a href='' target="_blank" title=''>
<img src='UploadPhoto/newsimage/20071015143853.gif' height="100" width="130" border="0"></a>
</td>

<td align="center" valign="top">
<a href='' target="_blank" title=''>
<img src='UploadPhoto/Image/2007-10/200792584956.gif' height="100" width="130" border="0"></a>

</td>

<td align="center" valign="top">
<a href='' target="_blank" title=''>
<img src='UploadPhoto/200791711558.gif' height="100" width="130" border="0"></a>

</td>
<td> </td>

</TR>
</TABLE>

<!--图片列表结束--> </TD>
<TD id="demo2" width="1"></TD>
</TR></TBODY></TABLE>
<SCRIPT>
var speed=10
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>
</span>
</div>