有一个用来做滚动展示的JS API: scroll_v1.20.js
View Code
var sina = { $: function(objName) { if (document.getElementById) { return eval('document.getElementById("' + objName + '")') } else { return eval('document.all.' + objName) } }, isIE: navigator.appVersion.indexOf("MSIE") != -1 ? true: false, addEvent: function(l, i, I) { if (l.attachEvent) { l.attachEvent("on" + i, I) } else { l.addEventListener(i, I, false) } }, delEvent: function(l, i, I) { if (l.detachEvent) { l.detachEvent("on" + i, I) } else { l.removeEventListener(i, I, false) } }, readCookie: function(O) { var o = "", l = O + "="; if (document.cookie.length > 0) { var i = document.cookie.indexOf(l); if (i != -1) { i += l.length; var I = document.cookie.indexOf(";", i); if (I == -1) I = document.cookie.length; o = unescape(document.cookie.substring(i, I)) } }; return o }, writeCookie: function(i, l, o, c) { var O = "", I = ""; if (o != null) { O = new Date((new Date).getTime() + o * 3600000); O = "; expires=" + O.toGMTString() }; if (c != null) { I = ";domain=" + c }; document.cookie = i + "=" + escape(l) + O + I }, readStyle: function(I, l) { if (I.style[l]) { return I.style[l] } else if (I.currentStyle) { return I.currentStyle[l] } else if (document.defaultView && document.defaultView.getComputedStyle) { var i = document.defaultView.getComputedStyle(I, null); return i.getPropertyValue(l) } else { return null } } }; function ScrollPic(i, o, I, l, O) { var c = this; c.scrollContId = i; c.arrLeftId = o; c.arrRightId = I; c.dotListId = l; c.listType = O; c.dotClassName = "dotItem"; c.dotOnClassName = "dotItemOn"; c.dotObjArr = []; c.listEvent = "onclick"; c.circularly = true; c.pageWidth = 0; c.frameWidth = 0; c.speed = 10; c.space = 10; c.upright = false; c.pageIndex = 0; c.autoPlay = true; c.autoPlayTime = 5; c._autoTimeObj; c._scrollTimeObj; c._state = "ready"; c.stripDiv = document.createElement("DIV"); c.listDiv01 = document.createElement("DIV"); c.listDiv02 = document.createElement("DIV") }; ScrollPic.prototype.version = "1.20"; ScrollPic.prototype.author = "mengjia"; ScrollPic.prototype.initialize = function() { var O = this, l = O; if (!O.scrollContId) { throw new Error("必须指定scrollContId."); return }; O.scrollContDiv = sina.$(O.scrollContId); if (!O.scrollContDiv) { throw new Error("scrollContId不是正确的对象.(scrollContId = \"" + O.scrollContId + "\")"); return }; O.scrollContDiv.style[O.upright ? 'height': 'width'] = O.frameWidth + "px"; O.scrollContDiv.style.overflow = "hidden"; O.listDiv01.innerHTML = O.scrollContDiv.innerHTML; O.scrollContDiv.innerHTML = ""; O.scrollContDiv.appendChild(O.stripDiv); O.stripDiv.appendChild(O.listDiv01); if (O.circularly) { O.stripDiv.appendChild(O.listDiv02); O.listDiv02.innerHTML = O.listDiv01.innerHTML }; O.stripDiv.style.overflow = "hidden"; O.stripDiv.style.zoom = "1"; O.stripDiv.style[O.upright ? 'height': 'width'] = "32766px"; if (!O.upright) { O.listDiv01.style.cssFloat = "left"; O.listDiv01.style.styleFloat = "left"; O.listDiv01.style.overflow = "hidden" }; O.listDiv01.style.zoom = "1"; if (O.circularly && !O.upright) { O.listDiv02.style.cssFloat = "left"; O.listDiv02.style.styleFloat = "left"; O.listDiv02.style.overflow = "hidden" }; O.listDiv02.style.zoom = "1"; sina.addEvent(O.scrollContDiv, "mouseover", function() { l.stop() }); sina.addEvent(O.scrollContDiv, "mouseout", function() { l.play() }); if (O.arrLeftId) { O.arrLeftObj = sina.$(O.arrLeftId); if (O.arrLeftObj) { sina.addEvent(O.arrLeftObj, "mousedown", function() { l.rightMouseDown() }); sina.addEvent(O.arrLeftObj, "mouseup", function() { l.rightEnd() }); sina.addEvent(O.arrLeftObj, "mouseout", function() { l.rightEnd() }) } }; if (O.arrRightId) { O.arrRightObj = sina.$(O.arrRightId); if (O.arrRightObj) { sina.addEvent(O.arrRightObj, "mousedown", function() { l.leftMouseDown() }); sina.addEvent(O.arrRightObj, "mouseup", function() { l.leftEnd() }); sina.addEvent(O.arrRightObj, "mouseout", function() { l.leftEnd() }) } }; if (O.dotListId) { O.dotListObj = sina.$(O.dotListId); O.dotListObj.innerHTML = ""; if (O.dotListObj) { var I = Math.round(O.listDiv01[O.upright ? 'offsetHeight': 'offsetWidth'] / O.frameWidth + 0.4), o, i; for (o = 0; o < I; o++) { i = document.createElement("span"); O.dotListObj.appendChild(i); O.dotObjArr.push(i); if (o == O.pageIndex) { i.className = O.dotOnClassName } else { i.className = O.dotClassName }; if (O.listType == 'number') { i.innerHTML = o + 1 }; i.title = "第" + (o + 1) + "页"; i.num = o; i[O.listEvent] = function() { l.pageTo(this.num) } } } }; O.scrollContDiv[O.upright ? 'scrollTop': 'scrollLeft'] = 0; if (O.autoPlay) { O.play() } }; ScrollPic.prototype.leftMouseDown = function() { if (this._state != "ready") { return }; var thisTemp = this; this._state = "floating"; this._scrollTimeObj = setInterval(function() { thisTemp.moveLeft() }, this.speed) }; ScrollPic.prototype.rightMouseDown = function() { if (this._state != "ready") { return }; var thisTemp = this; this._state = "floating"; this._scrollTimeObj = setInterval(function() { thisTemp.moveRight() }, this.speed) }; ScrollPic.prototype.moveLeft = function() { var i = this; if (i.circularly) { if (i.scrollContDiv[(i.upright ? 'scrollTop': 'scrollLeft')] + i.space >= i.listDiv01[(i.upright ? 'scrollHeight': 'scrollWidth')]) { i.scrollContDiv[(i.upright ? 'scrollTop': 'scrollLeft')] = i.scrollContDiv[(i.upright ? 'scrollTop': 'scrollLeft')] + i.space - i.listDiv01[(i.upright ? 'scrollHeight': 'scrollWidth')] } else { i.scrollContDiv[(i.upright ? 'scrollTop': 'scrollLeft')] += i.space } } else { if (i.scrollContDiv[(i.upright ? 'scrollTop': 'scrollLeft')] + i.space >= i.listDiv01[(i.upright ? 'scrollHeight': 'scrollWidth')] - i.frameWidth) { i.scrollContDiv[(i.upright ? 'scrollTop': 'scrollLeft')] = i.listDiv01[(i.upright ? 'scrollHeight': 'scrollWidth')] - i.frameWidth; i.leftEnd() } else { i.scrollContDiv[(i.upright ? 'scrollTop': 'scrollLeft')] += i.space } }; i.accountPageIndex() }; ScrollPic.prototype.moveRight = function() { var i = this; if (i.circularly) { if (i.scrollContDiv[(i.upright ? 'scrollTop': 'scrollLeft')] - i.space <= 0) { i.scrollContDiv[(i.upright ? 'scrollTop': 'scrollLeft')] = i.listDiv01[(i.upright ? 'scrollHeight': 'scrollWidth')] + i.scrollContDiv[(i.upright ? 'scrollTop': 'scrollLeft')] - i.space } else { i.scrollContDiv[(i.upright ? 'scrollTop': 'scrollLeft')] -= i.space } } else { if (i.scrollContDiv[(i.upright ? 'scrollTop': 'scrollLeft')] - i.space <= 0) { i.scrollContDiv[(i.upright ? 'scrollTop': 'scrollLeft')] = 0; i.rightEnd() } else { i.scrollContDiv[(i.upright ? 'scrollTop': 'scrollLeft')] -= i.space } }; i.accountPageIndex() }; ScrollPic.prototype.leftEnd = function() { var I = this; if (I._state != "floating") { return }; I._state = "stoping"; clearInterval(I._scrollTimeObj); var i = I.pageWidth - I.scrollContDiv[(I.upright ? 'scrollTop': 'scrollLeft')] % I.pageWidth; I.move(i) }; ScrollPic.prototype.rightEnd = function() { var I = this; if (I._state != "floating") { return }; I._state = "stoping"; clearInterval(I._scrollTimeObj); var i = -I.scrollContDiv[(I.upright ? 'scrollTop': 'scrollLeft')] % I.pageWidth; I.move(i) }; ScrollPic.prototype.move = function(num, quick) { var thisTemp = this, thisMove = num / 5; if (!quick) { if (thisMove > this.space) { thisMove = this.space }; if (thisMove < -this.space) { thisMove = -this.space } }; if (Math.abs(thisMove) < 1 && thisMove != 0) { thisMove = thisMove >= 0 ? 1 : -1 } else { thisMove = Math.round(thisMove) }; var temp = this.scrollContDiv[(this.upright ? 'scrollTop': 'scrollLeft')] + thisMove; if (thisMove > 0) { if (this.circularly) { if (this.scrollContDiv[(this.upright ? 'scrollTop': 'scrollLeft')] + thisMove >= this.listDiv01[(this.upright ? 'scrollHeight': 'scrollWidth')]) { this.scrollContDiv[(this.upright ? 'scrollTop': 'scrollLeft')] = this.scrollContDiv[(this.upright ? 'scrollTop': 'scrollLeft')] + thisMove - this.listDiv01[(this.upright ? 'scrollHeight': 'scrollWidth')] } else { this.scrollContDiv[(this.upright ? 'scrollTop': 'scrollLeft')] += thisMove } } else { if (this.scrollContDiv[(this.upright ? 'scrollTop': 'scrollLeft')] + thisMove >= this.listDiv01[(this.upright ? 'scrollHeight': 'scrollWidth')] - this.frameWidth) { this.scrollContDiv[(this.upright ? 'scrollTop': 'scrollLeft')] = this.listDiv01[(this.upright ? 'scrollHeight': 'scrollWidth')] - this.frameWidth; this._state = "ready"; return } else { this.scrollContDiv[(this.upright ? 'scrollTop': 'scrollLeft')] += thisMove } } } else { if (this.circularly) { if (this.scrollContDiv[(this.upright ? 'scrollTop': 'scrollLeft')] + thisMove < 0) { this.scrollContDiv[(this.upright ? 'scrollTop': 'scrollLeft')] = this.listDiv01[(this.upright ? 'scrollHeight': 'scrollWidth')] + this.scrollContDiv[(this.upright ? 'scrollTop': 'scrollLeft')] + thisMove } else { this.scrollContDiv[(this.upright ? 'scrollTop': 'scrollLeft')] += thisMove } } else { if (this.scrollContDiv[(this.upright ? 'scrollTop': 'scrollLeft')] - thisMove < 0) { this.scrollContDiv[(this.upright ? 'scrollTop': 'scrollLeft')] = 0; this._state = "ready"; return } else { this.scrollContDiv[(this.upright ? 'scrollTop': 'scrollLeft')] += thisMove } } }; num -= thisMove; if (Math.abs(num) == 0) { this._state = "ready"; if (this.autoPlay) { this.play() }; this.accountPageIndex(); return } else { this.accountPageIndex(); this._scrollTimeObj = setTimeout(function() { thisTemp.move(num, quick) }, this.speed) } }; ScrollPic.prototype.pre = function() { var i = this; if (i._state != "ready") { return }; i._state = "stoping"; i.move( - i.pageWidth, true) }; ScrollPic.prototype.next = function(i) { var I = this; if (I._state != "ready") { return }; I._state = "stoping"; if (I.circularly) { I.move(I.pageWidth, true) } else { if (I.scrollContDiv[(I.upright ? 'scrollTop': 'scrollLeft')] >= I.listDiv01[(I.upright ? 'scrollHeight': 'scrollWidth')] - I.frameWidth) { I._state = "ready"; if (i) { I.pageTo(0) } } else { I.move(I.pageWidth, true) } } }; ScrollPic.prototype.play = function() { var thisTemp = this; if (!this.autoPlay) { return }; clearInterval(this._autoTimeObj); this._autoTimeObj = setInterval(function() { thisTemp.next(true) }, this.autoPlayTime * 1000) }; ScrollPic.prototype.stop = function() { clearInterval(this._autoTimeObj) }; ScrollPic.prototype.pageTo = function(i) { var l = this; if (l.pageIndex == i) { return }; clearTimeout(l._scrollTimeObj); l._state = "stoping"; var I = i * l.frameWidth - l.scrollContDiv[(l.upright ? 'scrollTop': 'scrollLeft')]; l.move(I, true) }; ScrollPic.prototype.accountPageIndex = function() { var I = this, i = Math.round(I.scrollContDiv[(I.upright ? 'scrollTop': 'scrollLeft')] / I.frameWidth); if (i == I.pageIndex) { return }; I.pageIndex = i; if (I.pageIndex > Math.round(I.listDiv01[I.upright ? 'offsetHeight': 'offsetWidth'] / I.frameWidth + 0.4) - 1) { I.pageIndex = 0 }; var l; for (l = 0; l < I.dotObjArr.length; l++) { if (l == I.pageIndex) { I.dotObjArr[l].className = I.dotOnClassName } else { I.dotObjArr[l].className = I.dotClassName } } };
似乎比较古老了，没有用到JQUERY ，但它本身已经封装成了API，用起来也很方便。
View Code
<div id="scrollermain"> <div id="scrollwrapper"> <div class="scrollBlk"> <div class="Cont" id="scrollCont"> <!-- 图片列表 begin --> <div class="box"> <a id="scrolla" href="#" target="_blank"></a></div> <div class="box"> <a id="scrollb" href="#" target="_blank"></a></div> <div class="box"> <a id="scrollg" href="#" target="_blank"></a></div> <!-- 图片列表 end --> </div> <div class="arrLeft" id="scrollArrLeft"> <img height="53" src="images/goleft.jpg" width="41"></div> <div class="arrRight" id="scrollArrRight"> <img height="255" src="images/goright.jpg" width="42"></div> </div> </div> </div>
在BODY结束之后进行API参数设置：
<script type="text/javascript"> var scrollPic_01 = new ScrollPic(); scrollPic_01.scrollContId = "scrollCont"; //内容容器ID scrollPic_01.arrLeftId = "scrollArrLeft"; //左箭头ID scrollPic_01.arrRightId = "scrollArrRight"; //右箭头ID scrollPic_01.frameWidth = 189; //显示框宽度 **显示框宽度必须是翻页宽度的倍数 scrollPic_01.pageWidth = 189; //翻页宽度 scrollPic_01.upright = false; //垂直滚动 scrollPic_01.speed = 10; //移动速度(单位毫秒，越小越快) scrollPic_01.space = 10; //每次移动像素(单位px，越大越快) scrollPic_01.autoPlay = true; //自动播放 scrollPic_01.autoPlayTime = 2; //自动播放间隔时间(秒) scrollPic_01.initialize(); //初始化 </script>
我做前端的好朋友推荐给我的，她一直用它，从来没有发现过问题。
但是最近我做一个卡片滚动的时候，发现每滚动一轮，第二轮开始卡片的位置会向右移动1像素。
且只有设置成自动播放的时候，问题才会出现，手动播放 autoPlay = false 是不会有问题的。
scrollPic_01.autoPlay = true; //自动播放
我猜想是不是算法有问题？
但是奇异的现象是，这段代码做出来的实例在放入整体的HTML页面之前，并不会偏移。
所以我把已经放入整个页面后的HTML代码以及CSS与单独的JS DEMO反复对比才发现，是CSS中一个小小的属性值，导致了自动播放的偏移：
.scrollBlk .box { display:inline; overflow:hidden;float: left; width:189px; height:255px;}
就是overflow:hidden;.box必须有该属性。否则每滚一轮，从第二张图开始向右偏移1像素。
还有JS设置中
scrollPic_01.frameWidth = 250; //显示框宽度 **显示框宽度必须是翻页宽度的倍数 scrollPic_01.pageWidth = 250; //翻页宽度
这两项一定要和内容区域宽度（左右滚动）或者高度（上下滚动）一致，不然也会导致翻页以后位置偏移。
#scrollCont li{ 335px; display:block; height:250px;}