原生Javascript焦点图切换控件

很常见的javascript效果，写成控件，需要的时候可以直接拿来用

点击这里查看原生Javascript焦点图切换控件的演示

代码：

//原生JavaScript焦点图切换控件
function PicSlide(){
	
	var controls = document.getElementById('slide-controls').getElementsByTagName('li');//根据需要选择元素
	var list = document.getElementById("slide-list").getElementsByTagName('li');//根据需要选择元素
	
	var delay = 3000;
	var _this = this;
	_this.active = 0; //当前显示内容的下标
	_this.list = list;
	_this.controls = controls;
	
	for(var i=0; i<controls.length; i++){
		controls[i].index = i;
		controls[i].onmouseenter = function(){
			if(this.index === _this.active) return;
			
			clearInterval(_this.timer);
			_this.clear();
			_this.select(this);
		};
		
		controls[i].onmouseleave  = function(){
			clearInterval(_this.timer);
			_this.timer = setInterval(function(){
				_this.run()
			}, delay);
			
		};
	}
	
	_this.timer = setInterval(function(){ _this.run() }, delay);
	
};

PicSlide.prototype = {
	
	/*内容淡入*/
	select: function(target){
		target.className = 'active';
		this.active = target.index;
		effect.animate(this.list[target.index], { 'opacity': 100 } );	
	},
	
	/*内容淡出*/
	clear: function(){
		var controls = this.controls;
		var list = this.list;
		var active = this.active;
		
		controls[active].className = '';
		effect.animate(list[active], { 'opacity': 0 });
	},
	
	/*顺序播放焦点图*/
	run: function(){
		var controls = this.controls;
		var list = this.list;
		var active = this.active;	
		
		this.clear();
		active += 1;
		active = active % controls.length;
		controls[active].className = 'active';
		
		effect.animate(list[active], { 'opacity': 100 } );
		this.active = active;
	}
	
};