jQuery实现轮播效果(二) - 插件实现

开篇

前一篇文章( jQuery实现轮播效果(一) - 基础)讲到了怎样用jquery来实现一个简单的jquery轮播效果，基本的功能已经实现了，效果看起来还令人满意，唯一不足的就是：每次需要轮播效果时，要将代码复制粘贴过去，如果有些部分需要修改（例如：轮播时的动画效果，前一篇使用的是jquery的淡入淡出效果，如果改成滑动效果，不可避免的要修改js代码），那么就需要对js代码进行修改，对我所写的jquery轮播效果的js代码不熟悉的程序员来说，修改这些js确实很困难。轮播插件所要实现的目标之一就是插件可以灵活配置（不光只是本篇文章的插件），程序员只需要写少量的代码就可以实现丰富的功能，这当然是一件很好的事情。本篇文章的轮播插件的html和css部分需要程序员自己编写，而实现效果的js只需要少量的编写。

插件实现

 

(function($, window, document) {
	//---- Statics
	var DEFAULT_ANIMATE_TYPE = 'fade', 
		ARRAY_SLICE = [].slice,
		ARRAY_CONCAT = [].concat
		;
	
	//---- Methods
	function concatArray() {
		var deep = false,
			result = [];
		if(arguments.length > 0 && 
				arguments[arguments.length - 1] === true) {
			deep = true;
		}
		for(var i = 0; i < arguments.length; i++) {
			if(!!arguments[i].length) {
				if(deep) {
					for(var j = 0; j < arguments[i].length; j++) {
						//recursive call
						result =  ARRAY_CONCAT.call(result, 
								concatArray(arguments[i][j], true));
					}
				} else {
					result = ARRAY_CONCAT.call(result, arguments[i]);
				}
			} else if(i != arguments.length - 1 || 
					(arguments[arguments.length - 1] !== true &&
							arguments[arguments.length - 1] !== false)) {
				result.push(arguments[i]);
			}
		}
		return result;
	}

	//----- Core
	$.fn.extend({
		zslider: function(zsliderSetting, autoStart) {
			var itemLenght = 0,
				currItemIndex = 0,
				started = false,
				oInterval = {},
				setting =  {
					intervalTime: 3000,
					step: 1,
					imagePanels: $(),
					animateConfig: {
						atype: 'fade',
						fadeInSpeed: 500,
						fadeOutSpeed: 1000
					},
					panelHoverStop: true,
					ctrlItems: $(),
					ctrlItemActivateType: 'hover' || 'click',
					ctrlItemHoverCls: '',
					flipBtn: {},
					panelHoverShowFlipBtn: true,
					callbacks: {
					    animate: null
					}
				},
				that = this
				;
			
			//core methods
			var slider = {
					pre: function() {
						var toIndex = itemLenght + 
							(currItemIndex - setting.step) % itemLenght;
						slider.to(toIndex);
					},
					next: function() {
						var toIndex = (currItemIndex + setting.step) % itemLenght;
						slider.to(toIndex);
					},
					to: function(toIndex) {
						//handle the index value
						if(typeof toIndex === 'function') {
							toIndex = toIndex.call(that, concatArray(setting.imagePanels, true), 
										concatArray(setting.ctrlItems, true),
											currItemIndex, step);
						}
						if(window.isNaN(toIndex)) {
							toIndex = 0;
						}
						toIndex = Math.round(+toIndex) % itemLenght;
						if(toIndex < 0) {
							toIndex = itemLenght + toIndex;
						}
						
						var currentPanel = setting.imagePanels.eq(currItemIndex),
						toPanel = setting.imagePanels.eq(toIndex),
						currrntCtrlItem = setting.ctrlItems.eq(currItemIndex)
						toCtrlItem = setting.ctrlItems.eq(toIndex)
						;
						if(!setting.callbacks.animate || 
								setting.callbacks.animate.call(that, 
										concatArray(setting.imagePanels, true), 
											concatArray(setting.ctrlItems, true),
												currItemIndex, toIndex) === true) {
							currrntCtrlItem.removeClass(setting.ctrlItemHoverCls);
							toCtrlItem.addClass(setting.ctrlItemHoverCls);
							
							toPanel.fadeIn(setting.animateConfig.fadeInSpeed);
							currentPanel.fadeOut(setting.animateConfig.fadeOutSpeed);
						}
						
						//set the current item index
						currItemIndex = toIndex;
					},
					start: function() {
						if(!started) {
							started = true;
							oInterval = 
								window.setInterval(slider.next, setting.intervalTime);
						}
					},
					stop: function() {
						if(started) {
							started = false;
							window.clearInterval(oInterval);
						}
					},
					isStarted: function() {
						return started;
					}
			};
			function initData() {
				if(zsliderSetting) {
					var temp_callbacks = zsliderSetting.callbacks;
					
					$.extend(setting, zsliderSetting);
					$.extend(setting.callbacks, temp_callbacks);
					
					itemLenght = setting.imagePanels.length;
				}
				//convert to the jquery object
				setting.imagePanels = $(setting.imagePanels);
				setting.ctrlItems = $(setting.ctrlItems);
				setting.flipBtn.container = $(setting.flipBtn.container);
				setting.flipBtn.preBtn = $(setting.flipBtn.preBtn);
				setting.flipBtn.nextBtn = $(setting.flipBtn.nextBtn);
			}
			function initLook() {
				//show the first image panel and hide other
				setting.imagePanels.hide();
				setting.imagePanels.filter(':first').show();
				//activate the first control item and deactivate other
				setting.ctrlItems.removeClass(setting.ctrlItemHoverCls);
				setting.ctrlItems.filter(':first').addClass(setting.ctrlItemHoverCls);
				$(that).css('overflow', 'hidden');
				if(setting.panelHoverShowFlipBtn) {
					showFlipBtn(false);
				}
			}
			function initEvent() {
				$(concatArray(setting.imagePanels, 
						setting.flipBtn.preBtn, setting.flipBtn.nextBtn, true)).hover(function() {
					if(setting.panelHoverStop) {
						slider.stop();
					}
					if(setting.panelHoverShowFlipBtn) {
						showFlipBtn(true);
					}
				}, function() {
					slider.start();
					if(setting.panelHoverShowFlipBtn) {
						showFlipBtn(false);
					}
				});
				if(setting.ctrlItemActivateType === 'click') {
					setting.ctrlItems.unbind('click');
					setting.ctrlItems.bind('click', function() {
						slider.to($(this).index());
					});
				} else {
					setting.ctrlItems.hover(function() {
						slider.stop();
						slider.to($(this).index());
					}, function() {
						slider.start();
					});
				}
				setting.flipBtn.preBtn.unbind('click');
				setting.flipBtn.preBtn.bind('click', function() {
					slider.pre();
				});
				setting.flipBtn.nextBtn.unbind('click');
				setting.flipBtn.nextBtn.bind('click', function() {
					slider.next();
				});
			}
			function init() {
				initData();
				
				initLook();
				
				initEvent();
			}
			
			function showFlipBtn(show) {
				var hasContainer = setting.flipBtn.container.length > 0,
					eles;
				eles = hasContainer ? setting.flipBtn.container :
					//to the dom array:
					/*ARRAY_CONCAT.call(ARRAY_SLICE.apply(setting.flipBtn.preBtn), 
							ARRAY_SLICE.apply(setting.flipBtn.nextBtn));*/
					concatArray(setting.flipBtn.preBtn, 
									setting.flipBtn.nextBtn, true);
				if(show) {
					$(eles).show();
				} else {
					$(eles).hide();
				}
			}
			
			init();
			if(arguments.length < 2 || !!autoStart){
				slider.start();
			}
			return slider;
		}
	});
})(jQuery, window, document);