日期:2014-05-16  浏览次数:20426 次

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;//滚动区域id
	this.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(th