Seamless scrolling of pictures

<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><DivID= "Demo"><DivID= "Indemo"><DivID= "Demo1"><ahref="#"><imgsrc= "Img/hydra_index_pic1.png"Border= "0" /></a><ahref="#"><imgsrc= "Img/hydra_index_pic2.png"Border= "0" /></a><ahref="#"><imgsrc= "Img/hydra_index_pic3.png"Border= "0" /></a><ahref="#"><imgsrc= "Img/hydra_index_pic4.png"Border= "0" /></a><ahref="#"><imgsrc= "Img/hydra_index_pic5.png"Border= "0" /></a><ahref="#"><imgsrc= "Img/hydra_index_pic6.png"Border= "0" /></a></Div><DivID= "Demo2"></Div></Div></Div></Div><Script>//when using Div, make sure that Demo2 and demo1 are on the same line.var Speed= -//The higher the speed, the slower the speed.vartab2=document.getElementById ("Demo2");varTAB1=document.getElementById ("Demo1");varTab=document.getElementById ("Demo"); tab2.innerhtml=tab1.innerhtmlfunctionMarquee () {if(Tab2.offsetwidth-Tab.scrollleft<=0)//offsetwidth is the visible width of the objectTab.scrollleft-=Tab1.offsetwidth//ScrollWidth is the width of the actual content of the object, without wrapping the edgesElse{tab.scrollleft++}}varMyMar=setinterval (marquee,speed) tab.onmouseover=function() {clearinterval (MyMar)}tab.onmouseout=function() {MyMar=setinterval (marquee,speed)}</Script>

Today found that I wrote the picture scrolling code problems, although the picture can be recycled, but not continuous, the Internet to find out because Demo1 and Demo2 are used to float, so that they are not on the same line. After canceling the float, the picture is displayed on the same line as the second pass, and the workaround

#demo2 a{    float:left;    margin:10px;}

Seamless scrolling of pictures