javascript 图片滚动兑现（二）之代码实现

javascript 图片滚动实现（二）之代码实现

var common = {$ : 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(scrollContId, arrLeftId, arrRightId, dotListId) {this.scrollContId = scrollContId;//滚动区域idthis.arrLeftId = arrLeftId;//向左滚动按钮this.arrRightId = arrRightId;//向右滚动按钮this.dotListId = dotListId;//this.dotClassName = "dotItem";this.dotOnClassName = "dotItemOn";this.dotObjArr = [];//滚动对象数组this.pageWidth = 0;//滚动区域宽度this.frameWidth = 0;//this.speed = 10;//默认滚动速度this.space = 10;this.pageIndex = 0;//默认第一页this.autoPlay = true;//是否自动播放this.autoPlayTime = 5;//自动播放时间间隔var _autoTimeObj, _scrollTimeObj, _state = "ready";//，定时标志，动画是否可以开始this.stripDiv = document.createElement("DIV");this.listDiv01 = document.createElement("DIV");this.listDiv02 = document.createElement("DIV");if (!ScrollPic.childs) {ScrollPic.childs = []};this.ID = ScrollPic.childs.length;//滚动条目的长度ScrollPic.childs.push(this);/** *初始化函数  */this.initialize = function() {if (!this.scrollContId) {throw new Error("scrollContId.");return};this.scrollContDiv = common.$(this.scrollContId);//拿到滚动区域if (!this.scrollContDiv) {throw new Error("scrollContId.(scrollContId = "" + this.scrollContId + "")");return};this.scrollContDiv.style.width = this.frameWidth + "px";//设置滚动区域宽度this.scrollContDiv.style.overflow = "hidden";//超出区域隐藏this.listDiv01.innerHTML = this.listDiv02.innerHTML = this.scrollContDiv.innerHTML;//将滚动条目复制两份this.scrollContDiv.innerHTML = "";//清空原始区域this.scrollContDiv.appendChild(this.stripDiv);this.stripDiv.appendChild(this.listDiv01);this.stripDiv.appendChild(this.listDiv02);this.stripDiv.style.overflow = "hidden";//设置clone后的div样式this.stripDiv.style.zoom = "1";//网页为原始大小this.stripDiv.style.width = "32766px";this.listDiv01.style.cssFloat = "left";//所有元素向左浮动this.listDiv02.style.cssFloat = "left";common.addEvent(this.scrollContDiv, "mouseover", Function("ScrollPic.childs[" + this.ID + "].stop()"));//鼠标经过的话停止动画common.addEvent(this.scrollContDiv, "mouseout", Function("ScrollPic.childs[" + this.ID + "].play()"));//鼠标离开的话开始动画if (this.arrLeftId) {this.arrLeftObj = common.$(this.arrLeftId);//向左箭头if (this.arrLeftObj) {/** *注册向左的动画事件  */common.addEvent(this.arrLeftObj, "mousedown", Function("ScrollPic.childs[" + this.ID + "].rightMouseDown()"));common.addEvent(this.arrLeftObj, "mouseup", Function("ScrollPic.childs[" + this.ID + "].rightEnd()"));common.addEvent(this.arrLeftObj, "mouseout", Function("ScrollPic.childs[" + this.ID + "].rightEnd()"))}};if (this.arrRightId) {this.arrRightObj = common.$(this.arrRightId);if (this.arrRightObj) {/** *注册向右的动画事件  */common.addEvent(this.arrRightObj, "mousedown", Function("ScrollPic.childs[" + this.ID + "].leftMouseDown()"));common.addEvent(this.arrRightObj, "mouseup", Function("ScrollPic.childs[" + this.ID + "].leftEnd()"));common.addEvent(this.arrRightObj, "mouseout", Function("ScrollPic.childs[" + this.ID + "].leftEnd()"))}};/** * 分页处理 */if (this.dotListId) {this.dotListObj = common.$(this.dotListId);if (this.dotListObj) {var pages = Math.round(this.listDiv01.offsetWidth / this.frameWidth + 0.4), i, tempObj;//分页参数for ( i = 0; i < pages; i++) {tempObj = document.createElement("span");this.dotListObj.appendChild(tempObj);this.dotObjArr.push(tempObj);if (i == this.pageIndex) {tempObj.className = this.dotClassName} else {tempObj.className = this.dotOnClassName};tempObj.title = "" + (i + 1) + "";common.addEvent(tempObj, "click", Function("ScrollPic.childs[" + this.ID + "].pageTo(" + i + ")"))}}};/** *如果是自动滚动的话直接触发play()事件 */if (this.autoPlay) {this.play()}};/** *向左滚动事件  */this.leftMouseDown = function() {if (_state != "ready") {return//如果动画内容没有准备好则return};_state = "floating";//滚动中_scrollTimeObj = setInterval("ScrollPic.childs[" + this.ID + "].moveLeft()", this.speed)};/** *向右滚动事件  */this.rightMouseDown = function() {if (_state != "ready") {return};_state = "floating";_scrollTimeObj = setInterval("ScrollPic.childs[" + this.ID + "].moveRight()", this.speed)};/** *向左具体滚动逻辑  */this.moveLeft = function() {//如果原始div滚动后隐藏在滚动条左侧的宽度+滚动的像素>=克隆后div的滚动宽度，则重新开始从头滚动，否则以space个滚动单位继续滚动if (this.scrollContDiv.scrollLeft + this.space >= this.listDiv01.scrollWidth) {this.scrollContDiv.scrollLeft = this.scrollContDiv.scrollLeft + this.space - this.listDiv01.scrollWidth} else {this.scrollContDiv.scrollLeft += this.space};this.accountPageIndex()//滚动后重新计算当且页值};/** *向右具体滚动逻辑（同上）  */this.moveRight = function() {if (this.scrollContDiv.scrollLeft - this.space <= 0) {this.scrollContDiv.scrollLeft = this.listDiv01.scrollWidth + this.scrollContDiv.scrollLeft - this.space} else {this.scrollContDiv.scrollLeft -= this.space};this.accountPageIndex()};/** *如果向左滚动到结尾时  */this.leftEnd = function() {if (_state != "floating") {return};_state = "stoping";clearInterval(_scrollTimeObj);var fill = this.pageWidth - this.scrollContDiv.scrollLeft % this.pageWidth;this.move(fill)};/** *如果向右滚动到结尾时  */this.rightEnd = function() {if (_state != "floating") {return//如果不在动画中};_state = "stoping";//设置动画为停止状态clearInterval(_scrollTimeObj);//清空定时标志var fill = -this.scrollContDiv.scrollLeft % this.pageWidth;this.move(fill)};/** * 具体动画逻辑都在此 */this.move = function(num, quick) {var 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.scrollLeft + thisMove;/** *滚动逻辑同上，只是滚动单位变为 thisMove */if (thisMove > 0) {if (this.scrollContDiv.scrollLeft + thisMove >= this.listDiv01.scrollWidth) {this.scrollContDiv.scrollLeft = this.scrollContDiv.scrollLeft + thisMove - this.listDiv01.scrollWidth} else {this.scrollContDiv.scrollLeft += thisMove}} else {if (this.scrollContDiv.scrollLeft - thisMove <= 0) {this.scrollContDiv.scrollLeft = this.listDiv01.scrollWidth + this.scrollContDiv.scrollLeft - thisMove} else {this.scrollContDiv.scrollLeft += thisMove}};num -= thisMove;if (Math.abs(num) == 0) {_state = "ready";if (this.autoPlay) {this.play()};this.accountPageIndex();//重新计算页码return} else {this.accountPageIndex();//先计算页码setTimeout("ScrollPic.childs[" + this.ID + "].move(" + num + "," + quick + ")", this.speed)//递归调用直到无法移动}};/** *下一个  */this.next = function() {if (_state != "ready") {return};_state = "stoping";this.move(this.pageWidth, true)};/** * 触发动画的方法 */this.play = function() {if (!this.autoPlay) {return};clearInterval(_autoTimeObj);//先清除定时标志（以免冲突）_autoTimeObj = setInterval("ScrollPic.childs[" + this.ID + "].next()", this.autoPlayTime * 1000)//定时动画};/** *清除定时标志，停止动画  */this.stop = function() {clearInterval(_autoTimeObj)};/** *直接跳到第几页  */this.pageTo = function(num) {if (_state != "ready") {return};_state = "stoping";var fill = num * this.frameWidth - this.scrollContDiv.scrollLeft;this.move(fill, true)};/** *计算动画参数  */this.accountPageIndex = function() {this.pageIndex = Math.round(this.scrollContDiv.scrollLeft / this.frameWidth);if (this.pageIndex > Math.round(this.listDiv01.offsetWidth / this.frameWidth + 0.4) - 1) {this.pageIndex = 0};var i;for ( i = 0; i < this.dotObjArr.length; i++) {if (i == this.pageIndex) {this.dotObjArr[i].className = this.dotClassName} else {this.dotObjArr[i].className = this.dotOnClassName}}}};