核心代码如下：

(function($){
	
	/**
	 * jquery 图片轮播插件
	 * @params opt 参数对象
	 * @params opt.selector: 图片容器标签
	 * @params opt.effect: 图标轮播效果，默认为“fade”，可以为fade/horizon/vertical
	 * @params opt.interval：定时器的触发间隔时间，默认为3000（3秒）
	 * @params opt.next：查看下一个按钮的类名，默认为“.next”
	 * @params opt.prev：查看上一个按钮的类名，默认为“.prev”
	 * @params opt.index_container：查看单个图片索引容器的类名，默认为“.tab-btn”
	 * @params opt.index_elem：查看单个图片元素下的子元素标签名，默认为“span”
	 * @params opt.active_class：查看单个图片中选中的类名，默认为“active”
	 * @params opt.speed：动画持续时间，默认为1000（1秒）
	 * 
	 * 使用实例
	 * 1：淡入淡出效果（fade）
	 * $(selector).pic_view();
	 * 2：水平移动（horizon）
	 * $(selector).pic_view({effect: "horizon"});
	 * 2：垂直移动（veritcal）
	 * $(selector).pic_view({effect: "veritcal"});
	 */	
	$.fn.pic_view = function(opt){
		// 默认参数
		var d_opt = {
			selector: "li",
			effect: "fade",
			interval: 3000,
			next: ".next",
			prev: ".prev",
			index_container: ".tab-btn",
			index_elem: "span",
			active_class: "active",
			speed: 1000
		};

		// 合并参数
		$.extend(d_opt, opt);

		var _this = $(this),
			parent = _this.parent(),			
			index_html = "",
			index = 0,
			index_elems = null,
			pic_view = $(d_opt.selector, this),
			timer = null,
			pic_len = pic_view.length;

		// 生成index
		pic_view.each(function(i){
			if(i == 0){
				index_html += "<" + d_opt.index_elem + " class='" + d_opt.active_class  + "'></" + d_opt.index_elem + ">";
			}else{
				index_html += "<" + d_opt.index_elem + "></" + d_opt.index_elem + ">";
			}
		}).hide().eq(index).show();
		index_elems = $(d_opt.index_container, parent).html(index_html).find(d_opt.index_elem);

		if(d_opt.effect !== "fade"){
			_this.append(pic_view.eq(0).clone());
			pic_view = $(d_opt.selector, this);
			pic_len += 1;

			parent.css({
				position: "relative",
				overflow: "hidden"
			});

			init_position();
		}

		switch(d_opt.effect){
			case "fade":
				fade();
				break;
			case "horizon":
				horizon();
				break;
			case "vertical":
				vertical();
				break;
		}

		function fade(){
			// 注册index的click事件
			index_elems.click(function(){
				index_elems.unbind("click");
				index = $(this).index();
				fade_effect(arguments.callee);
			});

			// 初始化定时器
			timer = fade_timer();

			// 注册容器的mouseenter和mouseleave事件
			parent.mouseenter(function(){
				clearInterval(timer);
			}).mouseleave(function(){
				timer = fade_timer();
			});
		}

		function fade_timer(){
			return setInterval(function(){
				index >= pic_len - 1 ? index=0 : index+=1;
				fade_effect();
			}, d_opt.interval);
		}

		function fade_effect(event_func){
			index_elems.eq(index).addClass(d_opt.active_class).siblings().removeClass(d_opt.active_class);
			pic_view.eq(index).fadeIn(500, function(){
				index_elems.bind("click", event_func);
			}).siblings().hide();	
		}

		/* -------------------------------------------- */

		function horizon(){
			// 注册index的click事件
			index_elems.click(function(){
				var cur_index = $(this).index(),
					step = cur_index - index,
					deriction = "left";
				
				if(step === 0){
					return;
				}

				if(step < 0){
					deriction = "right";
				}

				index = cur_index;

				horizon_effect(deriction, Math.abs(step));
			});

			// 注册next和prev的click事件
			$(parent).find(d_opt.next).click(function(){
				index += 1;
				horizon_effect("left", 1);
			});
			$(parent).find(d_opt.prev).click(function(){
				// 如果是第一个，先重新定位
				if(index === 0){
					index = pic_len - 2;
					init_position(true);
				}else{
					index -= 1;
				}
				
				horizon_effect("right", 1);
			});

			// 初始化定时器
			timer = horizon_timer();

			// 注册容器的mouseenter和mouseleave事件
			parent.mouseenter(function(){
				clearInterval(timer);
			}).mouseleave(function(){
				timer = horizon_timer();
			});
		}
		
		function horizon_timer(){
			return setInterval(function(){
				index >= pic_len - 1 ? index=0 : index+=1;
				horizon_effect("left", 1);
			}, d_opt.interval); 
		}
		
		/**
		 * 左右移动方法
		 * @params direction 方向（left/right）
		 * @params step 步长（1/2/3..）
		 */
		function horizon_effect(direction, step){
			var d_obj = {left: "-=", right: "+="};
			var c_index = index;
			if(index === pic_len -1){
				c_index = 0;
			}
			index_elems.eq(c_index).addClass(d_opt.active_class).siblings().removeClass(d_opt.active_class);

			pic_view.each(function(i, elem){
				var width = $(elem).width();
				$(elem).animate({left: d_obj[direction] + (width * step) + "px"}, d_opt.speed, function(){
					if(direction === "left" && i === pic_len - 1 && index === pic_len -1){
						init_position();
					}
				});
			});
		}


		function vertical(){
		
		}

		/* -------------------------------------------- */

		function init_position(flag){
			if(!flag){
				index_elems.eq(0).addClass(d_opt.active_class).siblings().removeClass(d_opt.active_class);
				index = 0;
			}
			
			var width = pic_view.eq(0).width(),
				height = pic_view.eq(0).height();

			pic_view.each(function(i, elem){
				if(flag){
					i = i - (pic_len - 1);
				}

				var obj = {position: "absolute",display:"inline"};
	
				if(d_opt.effect === "horizon"){
					obj.top = 0;
					obj.left = (width * i) + "px";
				}else{
					obj.left = 0;
					obj.top = (height * i) + "px";
				}
				$(elem).css(obj);
			});
		} 
	};
})(jQuery);