Javascript无缝左右滚动

<! 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=gb2312"   /> < title ></ title > </ head > < body > < script  type ="text/javascript" > var $ = function (id) {    return "string" == typeof id ? document.getElementById(id) : id;};var Class = {  create: function() {    return function() {      this.initialize.apply(this, arguments);    }  }}Object.extend = function(destination, source) {    for (var property in source) {        destination[property] = source[property];    }    return destination;}function addEventHandler(oTarget, sEventType, fnHandler) {    if (oTarget.addEventListener) {        oTarget.addEventListener(sEventType, fnHandler, false);    } else if (oTarget.attachEvent) {        oTarget.attachEvent("on" + sEventType, fnHandler);    } else {        oTarget["on" + sEventType] = fnHandler;    }};var Scroller = Class.create();Scroller.prototype = {  initialize: function(idScroller, idScrollMid, idScrollLeft, idScrollRight, options) {    var oScroll = this, oScroller = $(idScroller), oScrollMid = $(idScrollMid);        this.widthScroller = oScroller.offsetWidth;    this.widthList = oScrollMid.offsetWidth;        if(this.widthList <= this.widthScroller) return;        oScroller.style.overflow = "hidden";    oScrollMid.appendChild(oScrollMid.cloneNode(true));        this.oScroller = oScroller;    this.scroll = true;        this.SetOptions(options);        this.side = 1;//1是左 -1是右    switch (this.options.Side) {        case "right" :            this.side = -1;            break;        case "left" :        default :            this.side = 1;    }        addEventHandler(oScrollMid , "mouseover", function() { oScroll.scroll = false; });    addEventHandler(oScrollMid , "mouseout", function() { oScroll.scroll = true; });        if(idScrollLeft) { addEventHandler($(idScrollLeft), "click", function() { oScroll.side = 1; }); }    if(idScrollRight) { addEventHandler($(idScrollRight), "click", function() { oScroll.side = -1; }); }        this.Scroll();  },  //设置默认属性  SetOptions: function(options) {    this.options = {//默认值      Step:            1,//每次变化的px量      Time:            50,//速度      Side:            "left"//默认滚动方向    };    Object.extend(this.options, options || {});  },  //滚动  Scroll: function() {    if (this.scroll) {        var iScroll = this.oScroller.scrollLeft, iWidth = this.widthList;        if(this.side > 0){            if(iScroll >= (iWidth * 2 - this.widthScroller)){ iScroll -= iWidth; }        } else {            if(iScroll <= 0){ iScroll += iWidth; }        }        this.oScroller.scrollLeft = iScroll + this.options.Step * this.side;//注意scrollLeft超过1400会自动变回1400 注意长度    }    var oScroll = this; window.setTimeout(function(){ oScroll.Scroll(); }, this.options.Time);  }};window.onload = function(){    new Scroller("idScroller","idScrollMid", "idScrollLeft", "idScrollRight");} </ script > < div  id ="idScroller"  style ="width:290px; overflow:hidden" > < div  style ="width:2000px" >      < div  id ="idScrollMid"  style ="float:left;" >        < div  style ="float:left" >   < img  src ="1.jpg"  width ="150px"  height ="150px;" />   </ div >        < div  style ="float:left" >   < img  src ="1.jpg"  width ="150px"  height ="150px;" />   </ div >      </ div > </ div > </ div > < input  id ="idScrollLeft"  type ="button"  value ="向左"   /> < input  id ="idScrollRight"  type ="button"  value ="向右"   /> </ body > </ html >

转载于:https://www.cnblogs.com/cloudgamer/archive/2008/01/15/1040408.html

相关资源：javascript实现的左右无缝滚动效果