使用Jquery开发适合自己的幻灯片组件

如果你的项目中使用的幻灯片样式多余一种，那么你是否考虑过开发一种扩展性更强的幻灯片组件……

该组件支持2种形式，一种是模仿的淘宝首页幻灯，ie下使用vml实现圆角；另一种是可以使用css任意的自定义样式，比如添加缩略图。

调用方法：

new p_slide(id,timer,opt);

参数说明：

1.id:传入容器ID

2.timer:切换时间间隔，毫秒数，默认4秒

3.opt:{type:设置幻灯片类型}

html:
下面是第一种形式的html，如果你需要第二种形式,自定义<ul class=”slide_t”></ul>里的html就可以了。

<div class="p_slide" id="slide1">
<ul class="slide_c">
<li style="background:#eee">1</li>
<li style="background:#ccc">2</li>
<li style="background:#eee">3</li>
<li style="background:#ccc">4</li>
</ul>
<ul class="slide_t"></ul>
</div>

javascript：

/*
/*
 * 幻灯片组件
 * @id:容器ID 
 * @timer:切换间隔时间 
 * @opt:{type:幻灯片类型,默认1}
 */
var p_slide = function(id,timer,opt){
	if(!id){return;}
	this.box = $("#"+id);
	this.C = this.box.children(".slide_c");
	this.c = this.C.children("li");
	this.len = this.c.length;
	this.M = this.box.children(".slide_t");
	this.timer = timer || 3000;
	this.ie = /msie/.test(navigator.userAgent.toLowerCase());
	this.m = null;
	this.A = null;
	this.vml = [];
	this.nowIndex = 0;
	opt = opt || {};
	this.type = opt.type || 1;//幻灯片类型
	this.init();
}
p_slide.prototype = {
	init : function(){
		var T = this;
		if(this.type==1){
			var html = "";
			//ie下用vml创建圆形
			if(this.ie){
				document.namespaces.add("v", "urn:schemas-microsoft-com:vml"); //创建vml命名空间
				document.createStyleSheet().addRule("v\\:oval", "behavior:url(#default#VML);display:inline-block;"); 
				for (var i = 0; i < this.len; i++) {
					this.vml[i] = document.createElement('<v:oval fillcolor="#fff" strokecolor="#fff" style="position:absolute;left:0;top:0;width:19px;height:19px"></v:oval>');
					this.vml[i].innerHTML = i+1;
				}
			}
			for(var i=1;i<=this.len;i++){				
				if (this.ie){
					html += '<li class="ie">';
				}else{
					html += '<li>';
				}
				html += i;
				html += '</li>';
			}			
			this.M.html(html).addClass("type1");
		}else if(this.type==2){
			this.M.addClass("type2");
		}
		this.m = this.M.children("li");
 
		//插入VML
		if (this.type==1&&this.ie) {
			for (var i = 0; i < this.len; i++) {
				this.m.eq(i).append(this.vml[i]);
			}
		}	
 
		this.bindEvent();
	},
	bindEvent : function(){
		var T = this;
		this.m.mouseover(function(){
			var m = $(this);
			window.clearInterval(T.A);
			T.change(m.index());
		})
		this.box.hover(function(){
			window.clearInterval(T.A);
		},function(){
			T.start();
		}).mouseout();
		T.change(T.nowIndex);
	},
	change : function(index){
		var T = this;
		index = (index>=this.len)?0:index;
		this.nowIndex = index ;
		var t = this.m.eq(index);
		t.addClass("current").siblings().removeClass("current");		
		if (this.type==1&&this.ie) {
			var m,v = this.vml[index];
			for(var i=0;i<this.len;i++){
				if(i==index){continue;}
				m = this.vml[i];
				m.fillcolor = '#fff';
				m.strokecolor = '#fff';
			}
			v.fillcolor = '#f60';
			v.strokecolor = '#f60';
		}	
 
		function animate(){
			var st = T.C.scrollTop(),
				St = T.c.outerHeight()*index,
				s = (St-st)/8,
				n = 15,
				A,
				Nt = st;
			A = setInterval(B,n);
			function B(){
				if(Math.abs(St-Nt)<=Math.abs(s)){
					clearInterval(A);
					T.C.scrollTop(St);
					return;
				}
				Nt += s;
				T.C.scrollTop(Nt);
			}
		}
		animate();
 
		this.nowIndex++;
	},
	start : function(){
		var T = this;
		this.A = window.setInterval(function(){
			T.change(T.nowIndex);
		},T.timer)
	}
}

DEMO:http://www.nolure.com/p/demo/slide.html