1, description--Seamless scrolling picture
2. Code
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "UTF-8"> <title></title> <styletype= "Text/css"> *{margin:0;padding:0;}. Box{width:600px;Height:200px;Border:1px solid Gray;margin:30px Auto;position:relative;Overflow:Hidden; }. Box UL{List-style:None;width:300%;position:Absolute;Top:0; Left:0; }. Box ul Li{float: Left; }. Box ul li img{ /*If you don't write this sentence, there will be a bottom margin*/vertical-align:Top;cursor:Pointer; } </style> </Head> <Body> <Divclass= "box"> <ul> <Li><imgsrc= "Img/01.jpg"alt="" /></Li> <Li><imgsrc= "Img/02.jpg"alt="" /></Li> <Li><imgsrc= "Img/03.jpg"alt="" /></Li> <Li><imgsrc= "Img/04.jpg"alt="" /></Li> <Li><imgsrc= "Img/01.jpg"alt="" /></Li> <Li><imgsrc= "Img/02.jpg"alt="" /></Li> </ul> </Div> </Body></HTML><Scripttype= "Text/javascript"> varul=document.getElementsByTagName ("ul")[0]; var Left=0; varTimer=NULL; Timer=setinterval (AutoPlay,5); functionAutoPlay () { left--; if( Left>- -){ }Else{ Left=0; } ul.style.left= Left+"px"; } ul.parentNode.onmousemove=function() {clearinterval (timer); } ul.parentNode.onmouseout=function() {Timer=setinterval (AutoPlay,5); }</Script>
View Code
3. Effect
Seamless scrolling
4. Precautions
(1) The image will have a margin of 3 pixels before it floats
Workaround: For Img{vertical-align:top;} Add this property.
(2) Seamless image scrolling is actually all the pictures in addition to a repetition, this can refer to the code.
js--Seamless Scrolling