使用插件实现
上面的效果看起来还令人满意，唯一不足的就是：每次需要轮播效果时，要将代码复制粘贴过去，如果有些部分需要修改（例如：轮播时的动画效果，前一篇使用的是jquery的淡入淡出效果，如果改成滑动效果，不可避免的要修改js代码），那么就需要对js代码进行修改，对我所写的jquery轮播效果的js代码不熟悉的程序员来说，修改这些js确实很困难。轮播插件所要实现的目标之一就是插件可以灵活配置（不光只是本篇文章的插件），程序员只需要写少量的代码就可以实现丰富的功能，这当然是一件很好的事情。本篇文章的轮播插件的html和css部分需要程序员自己编写，而实现效果的js只需要少量的编写。
这里我们使用到的zslider插件在GitHub上开源：
github:https://github.com/ricciozhang/zslider_v1
嗯，我们来看代码：
(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);
您可能感兴趣的文章: