Copy codeThe Code is as follows: <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = GBK"/>
<Title> JavaScript seamless scrolling (general method + object-oriented method) </title>
<Style type = "text/css">
. Clearfix: after {content: "."; display: block; height: 0; visibility: hidden; clear: both ;}
. Clearfix {* zoom: 1 ;}
Body {background: gray ;}
# Wrap {width: 810px; height: 160px;
Border: 1px solid black;
Position: relative;
Left: 50%;
Top: 50%;
Margin-left:-pixel PX;
Margin-top: 200px;
Background: # fff;
Overflow: hidden ;}
# Wrap ul {margin: 0px;
Padding: 0px;
Position: absolute;
Top: 0px;
Left: 0px ;}
# Wrap ul li {list-style: none; float: left; margin: 5px 10px; width: 265px ;}
# Wrap ul li img {border: 1px black solid; padding: 10px ;}
</Style>
<! -- Script type = "text/javascript">
Window. onload = function () {// General Method
Var wrap = document. getElementById ("wrap ");
Var wrap_ul = wrap. getElementsByTagName ("ul") [0];
Var wrap_li = wrap. getElementsByTagName ("li ");
Wrap_ul.innerHTML + = wrap_ul.innerHTML;
Wrap_ul.style.width = (wrap_li [0]. offsetWidth + 20) * wrap_li.length + "px ";
Autoscroll = setInterval (scscroll, 100 );
Function scroll (){
Wrap_ul.style.left = wrap_ul.offsetLeft-3 + "px"; // here, because ie does not parse offsetLeft, the number of ie must be reduced to 3.
If (wrap_ul.offsetLeft <=-wrap_ul.offsetWidth/2 ){
Wrap_ul.style.left = "0px ";
} Else if (wrap_ul.offsetLeft> = 0 ){
Wrap_ul.style.left =-wrap_ul.offsetWidth/2 + "px ";
}
}
Wrap. onmouseover = function (){
ClearInterval (Autoscroll );
}
Wrap. onmouseout = function (){
Autoscroll = setInterval (scscroll, 100 );
}
}
</Script -->
<Script type = "text/javascript">
Function Slide (obj, direction, speed) {// The object-oriented method, which can be used to control the direction freely. speed => 3 ie Can
This. container = document. getElementById (obj );
This. content = this. container. getElementsByTagName ("ul") [0];
This. lis = this. content. getElementsByTagName ("li ");
This. content. innerHTML + = this. content. innerHTML;
This. content. style. width = (this. lis [0]. offsetWidth + 20) * this. lis. length + "px ";
Var that = this
If (direction = "left "){
This. speed =-speed
} Else if (direction = "right "){
This. speed = speed
}
Slide. prototype. scroll = function (){
This. content. style. left = this. content. offsetLeft + this. speed + "px ";
If (this. content. offsetLeft <=-this. content. offsetWidth/2 ){
This. content. style. left = "0px ";
} Else if (this. content. offsetLeft> = 0 ){
This. content. style. left =-this. content. offsetWidth/2 + "px ";
}
}
This. time = setInterval (function () {that. scroll ()}, 100 );
This. container. onmouseover = function (){
ClearInterval (that. time );
}
This. container. onmouseout = function (){
That. time = setInterval (function () {that. scroll ()}, 100 );
}
}
</Script>
<Script type = "text/javascript">
Window. onload = function () {new Slide ("wrap", "left", 5 )}
</Script>
</Head>
<Body>
<Div id = "wrap">
<Ul class = "clearfix">
<Li> <a href = "#"> </a> </li>
<Li> <a href = "#"> </a> </li>
<Li> <a href = "#"> </a> </li>
<Li> <a href = "#"> </a> </li>
<Li> <a href = "#"> </a> </li>
</Ul>
</Div>
</Body>
</Html>