<!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>
本文转自博客园cloudgamer的博客，原文链接：Javascript无缝左右滚动，如需转载请自行联系原博主。