无缝循环滚动图片

一般的图片（或者文字）滚动直到最后一张图片滚出table框后第一张图片才会出现从而实现继续滚动，如何做到首尾两张图片相连不间断（无缝循环）滚动呢？

　　解决思路：一个设定宽度并且隐藏超出它宽度的内容的容器demo，里面放demo1和demo2，demo1是滚动内容，demo2为demo1的直接克隆副本，通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的，当滚动至demo1与demo2的交界处时直接跳回初始位置，因为demo1与demo2一样，所以分不出跳动的瞬间，从而达到“无缝”滚动的目的。

程序代码
-------------------------------------------
<div id="demo" style="overflow:hidden;width:100%;color:#ffffff;">
<table cellpadding="0" cellspacing="0" border="0">
<tr><td id="demo1" valign="top" align="center">
<table cellpadding="2" cellspacing="0" border="0">
<tr align="center">
<td><img src="图片1地址" ></td>
<td><img src="图片2地址" ></td>
<td><img src="图片3地址" ></td>
<td><img src="图片4地址" ></td>
<td><img src="图片5地址" ></td>
</tr>
</table>
</td>
<td id="demo2" valign="top"></td>
</tr>
</table>
</div>
<script>
var speed=2 //速度数值越大速度越慢
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>