Seamless horizontal image scrolling

<! -- Style -->

* {Margin: 0; padding: 0; font-size: 13px; Border: 0; Font:, Arial}
A {text-Decoration: none; color: #000}
Li {list-style-type: None}
. Bottombox {width: 950px; Height: 140px; margin: 0 auto; margin-top: 20px}
# Imgbox {width: 940px; Height: 130px; Background: # CCC; position: relative; overflow: hidden}
# IMG {display: block; width: 1700px; position: absolute}
# IMG Li {display: block; float: Left; width: 220px; text-align: Center}
# IMG {width: 200px; Height: 130px ;}

 

<! -- JS part -->

<SCRIPT>

VaR speed = 2000; // Interval
VaR Space = 1; // movement speed
VaR step = 3; // move the pixel
VaR liwidth;
VaR I = 0;
Function liwidth (){
Liwidth = Document. getelementbyid ("IMG"). getelementsbytagname ("Li"). Item (0). scrollwidth; // read the Li width
}
SetTimeout (liwidth, 1 );
Function roll (){
Function slide (){
Document. getelementbyid ("imgbox"). scrollleft = I; // move the content in the image box to the left.
I = I + step;
If (I> = liwidth ){
I = 0;
Clearinterval (timer );
VaR myul = Document. getelementbyid ("IMG"); // obtain the UL container whose ID is "IMG"
VaR newli = Document. createelement ("Li"); // create a new Li
Myul. appendchild (newli); // Add a new Li at the end of the UL container
VaR li01 = myul. getelementsbytagname ("Li"). Item (0); // obtain the 0th Li entries in the UL container
Newli. innerhtml = li01.innerhtml; // assign the HTML code in the first line of Li to the newly created Li
Myul. style. Display = "NONE"; // the image will flash a bit after the two (delete and return to the original position), So hide the image first
Myul. removechild (li01); // Delete 0th Li
Document. getelementbyid ("imgbox"). scrollleft = 0;
Myul. style. Display = "Block"; // re-display the image
Timer = setTimeout (roll, speed );
}
}
Timer = setinterval (slide, space );
}
Function imgmouseover (){
Clearinterval (timer); // move and stop when you touch the image
}
Function imgmouseout (){
Timer = setTimeout (roll, space); // move the cursor away from the image and continue
}
Timer = setTimeout (roll, space); // execute the moving Function
</SCRIPT>

 

<! -- Body reference -->

<Div class = "bottombox">
<Div id = "imgbox" onmouseover = "imgmouseover ()" onmouseout = "imgmouseout ()">
<Ul id = "IMG">
<Li> <a href = "#" target = "_ blank"> </a> </LI>
<Li> <a href = "#" target = "_ blank"> </a> </LI>
<Li> <a href = "#" target = "_ blank"> </a> </LI>
<Li> <a href = "#" target = "_ blank"> </a> </LI>
</Ul>
</Div>

Seamless horizontal image scrolling