<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; CHARSET=GBK "/>
<title>js 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:-410px;
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 (scroll,100);
function Scroll () {
wrap_ul.style.left=wrap_ul.offsetleft-3+ "px"; This is because IE is different to offsetleft, so IE must reduce the number greater than or equal 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 (scroll,100);
}
}
</script-->
<script type= "Text/javascript" >
function Slide (obj,direction,speed) {//object-oriented method, free to control the direction, 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>
<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>
