JS_简单无缝图片滚动

滚动原理:

function(a,b){
if(a.scrollLeft>=b){
a.scrollLeft=0;
}
a.scrollLeft++;

}

a:节点,b:阀值.

/*css*/

.main{width:500px;margin:0 auto;padding-top:50px;}
.imgBox{height:102px;overflow:hidden;_position:relative;}
.imgContent{width:90000px;_position:absolute}
.imgBox ul{float:left;}
.imgBox li{float:left;width:100px;height:100px;background:#CCC;border:1px solid #000;margin-right:20px;overflow:hidden;_display:inline;}

/*html*/

<div class="main">
<div class="imgBox" id="imgRun"> 滚动层
<div class="imgContent" id="imgCon"> 内容层,为了JS写的方便而多写的层
<ul>
<li style="background:#000"><img src="" width="100" height="100"/></li>
<li style="background:#F00"><img src="" width="100" height="100"/></li>
<li style="background:#00F"><img src="" width="100" height="100"/></li>
<li style="background:#F0F"><img src="" width="100" height="100"/></li>
<li style="background:#FF0"><img src="" width="100" height="100"/></li>
</ul>
</div>
</div>
</div>

/*js*/

var Class = {
create: function() {
return function() {
this.initialize.apply(this, arguments);
}
}
}
var imgRunleft = Class.create();
imgRunleft.prototype = {
initialize: function(a,b){
this.imgRun = document.getElementById(a);
this.imgCon = document.getElementById(b);
this.imgUl = this.imgCon.getElementsByTagName("ul");
this.imgLi = this.imgCon.getElementsByTagName("li");
if(!this.imgRun)return; //判断滚动层存在
if(this.imgRun.offsetWidth>=this.imgUl[0].offsetWidth)return;//判断滚动层的宽度和内容层的宽度,如果前者大于等于后者则返回
this.imgCon.appendChild(this.imgUl[0].cloneNode(true));
this.base();
},
base: function(){
var fazhi = this.imgUl[0].offsetWidth;
var runLe = this.runLe;
var imgRun = this.imgRun;
setInterval(function(){
runLe(imgRun,fazhi);
},30);
},
runLe: function(a,b){
if(a.scrollLeft>=b){
a.scrollLeft=0;
}
a.scrollLeft++;
}
}
new imgRunleft("imgRun","imgCon")