jquery for Carousel effect (ii)-Plug-in implementation

Opening

The previous article (jquery implementation of the Carousel effect (a)-foundation) talked about how to use jquery to achieve a simple jquery carousel effect, the basic function has been realized, the effect is still satisfactory, the only disadvantage is: every time you need a carousel effect, to copy and paste the code in the past, If some parts need to be modified (for example: the animation effect of the carousel, the previous one uses the jquery fade effect, if you change to a sliding effect, the inevitable to modify the JS code), then you need to modify the JS code, For programmers who are unfamiliar with the JS code I wrote about the jquery carousel effect, it's really hard to modify these JS. One of the goals of the Carousel plug-in is that the plug-in can be configured flexibly (not just the plugin for this article), but it's a good thing for programmers to write a small amount of code to achieve rich functionality. The HTML and CSS parts of the Carousel plugin for this article need to be written by the programmer, and the effect of JS requires only a small amount of writing.

Plug-in implementation

(Function ($, window, document) {//----staticsvar Default_animate_type = ' fade ', array_slice = [].slice,array_concat = []. concat;//----methodsfunction 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 Callresult = array_concat.ca ll (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 = Fal Se,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 me Thodsvar slider = {pre:function () {var toindex = itemlenght + (curritemindex-setting.step)% itemlenght;slider.to (toInd ex);},next:function () {var Toindex = (curritemindex + setting.step)% itemlenght;slider.to (toindex);},to:function ( Toindex) {//handle the index Valueif (typeof toindex = = = ' function ') {Toindex = Toindex.call (That, ConcatArray (Setting.ima Gepanels, 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 Indexcurritemindex = Toindex;},start:function () {if (!started) {started = True;ointerval = Window.s Etinterval (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 Objectsetting.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 Othersetting.imagePanels.hide (); Setting.imagePanels.filter (' : First '). Show ();//activate the first control item and deactivate Othersetting.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 (); SETTING.PANELHOVERSHOWFLIPBTN) {showflipbtn (false);}}); if (Setting.ctrlitemactivatetype = = = ' click ') {setting.ctrlItems.unbind (' click '); Setting.ctrlItems.bind (' click '), function () {slider.to ($ (this).Dex ());});} 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);

Zslider Plug-in

Github:https://github.com/ricciozhang/zslider_v1

csdn:http://download.csdn.net/detail/qq791967024/9098081

Copyright NOTICE: This article for Bo Master original article, welcome all kinds of reprint, reproduced please indicate the source!

jquery for Carousel effect (ii)-Plug-in implementation