图片无缝滚动

<style>
#demo 
{
    overflow:hidden;
    border: 1px dashed #d8edff;
    width: 900px;
    height:132px;
}
#demo img {
border: 2px solid #d8edff;
}
#demo1 a
{
    float:left;
    margin:10px;
    cursor:default;
}
#demo2 a
{
    float:left;
    margin:10px;
}
#indemo {
width: 800%;
}
</style>
<div id="demo">
<div id="indemo">
<div id="demo1">
<a href="#"><img src="img/hydra_index_pic1.png" border="0" /></a>
<a href="#"><img src="img/hydra_index_pic2.png" border="0" /></a>
<a href="#"><img src="img/hydra_index_pic3.png" border="0" /></a>
<a href="#"><img src="img/hydra_index_pic4.png" border="0" /></a>
<a href="#"><img src="img/hydra_index_pic5.png" border="0" /></a>
<a href="#"><img src="img/hydra_index_pic6.png" border="0" /></a>
</div>
<div id="demo2"></div>
</div>
</div>
</div>
<script>
//使用div时，请保证demo2与demo1是在同一行上.
var speed=30//速度数值越大速度越慢
var tab2=document.getElementById("demo2");
var tab1=document.getElementById("demo1");
var tab=document.getElementById("demo");
tab2.innerHTML=tab1.innerHTML
function Marquee(){
if(tab2.offsetWidth-tab.scrollLeft<=0)//offsetWidth 是对象的可见宽度
tab.scrollLeft-=tab1.offsetWidth//scrollWidth 是对象的实际内容的宽，不包边线宽度
else{
tab.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
tab.onmouseover=function() {clearInterval(MyMar)}
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>