JS分组切换内容并标识状态

发表于 2010年04月23日 soncy 61次阅读

大概需要实现的效果：调用部分：

var ftimg = new ImgChange({
	prev : "prev",//上一组按钮ID
	next : "next",//下一组按钮ID
	listIco : "list",//状态小圆点ID
	icoEl : "li",//小圆点标签
	conent : "content",//需要切换的内容区ID
	clist : "list",//切换区每组的class值
	disabled : "disabled",//按钮无效后需要添加的className
	active : "active"//小圆点激活时的className
});

HTML部分（可以发挥想象随意更改）：

<div id="prev">上一组</div>
<ul id="list">
	<li>1</li>
	<li>2</li>
	<li>3</li>
</ul>
<div id="next">下一组</div>
<div id="content">
	<div class="list">第一组</div>
	<div class="list">第二组</div>
	<div class="list">第三组</div>
</div>

CSS部分也可以发挥想象随意创造。 JS部分(代码中<为”<"符号，被插件转成这个了)：

function ImgChange(setting){
	if(!setting){
		alert("要使用该功能，请正确传入参数！");
		return;
	}
	this._prev = setting.prev;
	this._next = setting.next;
	this._listIco = setting.listIco;
	this._icoEl = setting.icoEl;
	this._conent = setting.conent;
	this._clist = setting.clist;
	this.nowGroup = 1;//当前第几组
	this.allGroups = 1;//一共多少组
	this._disabled = setting.disabled;
	this._active = setting.active;
	this.load();
}
 
ImgChange.prototype.load = function(){
	var $cs = function(el){
		return document.getElementById(el);
	}
	this._contents = $cs(this._conent).getElementsByTagName("*");
	this._groups = [];
	for(var i = 0;i &lt; this._contents.length;i++){
		if(this._contents[i].className == this._clist){
			this._groups.push(this._contents[i]);
		}
	}
	this.allGroups = this._groups.length;
	this._nextEl = $cs(this._next);
	this._prevEl = $cs(this._prev);
	this._status = $cs(this._listIco).getElementsByTagName(this._icoEl);
	this.regEvent();
};
 
ImgChange.prototype.hideAll = function(){
	for(var i = 0;i &lt; this._groups.length;i++){
		this._groups[i].style.display = "none";
	}
};
 
ImgChange.prototype.reStatus = function(){
	if(this.nowGroup &gt;= this.allGroups){
		this.addCss(this._nextEl,this._disabled);
	}else{
		this.removeCss(this._nextEl,this._disabled);
	}
 
	if(this.nowGroup &lt;= 1){
		this.addCss(this._prevEl,this._disabled);
	}else{
		this.removeCss(this._prevEl,this._disabled);
	}
 
	for(var i = 0;i &lt; this._status.length;i++){
		this.removeCss(this._status[i],this._active);
	}
 
	this.hideAll();
	this._groups[this.nowGroup -1].style.display = "block";
	this.addCss(this._status[this.nowGroup - 1],this._active);
};
 
 
ImgChange.prototype.regEvent = function(){
	var self = this;
	if(window.addEventListener){
		self._nextEl.addEventListener("click" , function(event){
			self.next();
		},false);
		self._prevEl.addEventListener("click" , function(event){
			self.prev();
		},false);
 
	}else{
		self._nextEl.attachEvent("onclick" , function(event){
			self.next();
		});
		self._prevEl.attachEvent("onclick" , function(event){
			self.prev();
		});
	}
 
 
	for(var i = 0; i &lt; this._status.length;i++){
		var _st = this._status[i];
		if(window.addEventListener){
			_st.addEventListener("click" , function(idx){
				return function(event){
					self.nowGroup = idx + 1;
					self.reStatus();
				}
 
			}(i),false);
		}else{
			_st.attachEvent("onclick" , function(idx){
				return function(event){
					self.nowGroup = idx + 1;
					self.reStatus();
				}
			}(i));
		}
	}
};
 
 
ImgChange.prototype.next = function(){
	if(this.nowGroup &gt;= this.allGroups) return;
	this.nowGroup ++;
	this.reStatus();
};
 
ImgChange.prototype.prev = function(){
	if(this.nowGroup &lt;= 1) return;
	this.nowGroup --;
	this.reStatus();
};
 
 
ImgChange.prototype.addCss = function(element,cssName){ 
	var element,cssName; 
	if (!element.className || element.className == cssName){ 
		element.className = cssName; 
	} 
	else{ 
		element.className = element.className + " " + cssName; 
	} 
};
 
ImgChange.prototype.removeCss = function(element,cssName){ 
	var element,cssName; 
	var oldCss = element.className; 
	var cssList = oldCss.split(" "); 
	for(var i = 0;i &lt; cssList.length;i++){ 
		if (cssList[i] == cssName) { 
			cssList[i] = ""; 
			break; 
		} 
	} 
	element.className = cssList.join(" "); 
};