JS_简单无缝图片滚动

滚动原理:

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

}

a:节点,b:阀值.

/*css*/

.main{500px;margin:0 auto;padding-top:50px;}
.imgBox{height:102px;overflow:hidden;_position:relative;}
.imgContent{90000px;_position:absolute}
.imgBox ul{float:left;}
.imgBox li{float:left;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")