jQuery插件之路(一)——试着给jQuery的一个Carousel插件添加新的功能

前几日在网上看到了一个关于Carousel插件的教学视频，因而也顺便跟着学习着作了一下。可是在作完以后发现，在别的网站上面看到相似的效果要比如今作的这个要多一个功能，也就是在底下会有一些按钮，当鼠标放上去或者点击以后，Carousel就会吧跟这个按钮相同下标的li做为第一帧显示。既然如今这个没有了这个功能，那么何不本身作一个呢？(本人也是第一个次写插件，有很差的地方万望指出)，全部的代码都在这里https://github.com/wwervin72/jQuery。

那么说干就干，首先咱们要作的就是要把这些按钮显示出来。因而咱们就须要在Carousel的原型对象prototype上添加一个方法，用于生成切换幻灯片的按钮。

switchSlideBtn : function(){
            var slideNum = this.posterItems.size();   //得到当前的这个carousel对象的总共的帧数
            var str = '';  
            var firstBtnLeft = (this.setting.width-(slideNum-1)*15-slideNum*15)/2;  //规定第一个按钮放的位置
            for(var i = 0; i<slideNum; i++){
                str += '<button class="btn"></button>';  //把每个btn的代码添加到str字符串中，而后一次性添加到selBtn这里面，避免屡次修改DOM
            }
            $('#selBtn').html(str);    
            for(var i = 0;i<slideNum; i++){
                $('#selBtn .btn').eq(i).css('left' , firstBtnLeft+i*30); 
            }        
},

而后咱们须要在Carousel这个构造函数里面运行这个方法

this.switchSlideBtn();

那么到了这里，咱们的选择按钮就已经添加好了。如今要作的就是给这每个按钮添加一个鼠标放上去的事件。

$('#selBtn .btn').each(function(){
            $(this).hover(function(){
                if(self.rotateFlag){
                    self.switchSlide(this);
                }
            },function(){
            });
 })

而后咱们也须要再给Carousel的原型对象添加一个切换幻灯片的方法，由于在HTML代码中咱们用的li而后里面放的是a、Img标签，因此下面的Li也就是Carousel的每一帧。

//用切换幻灯片的按钮切换幻灯片的方法
        switchSlide : function(btn){
            var self = this;
            var BtnIndex = $(btn).index();  //得到当前是哪个按钮执行事件
            $('#selBtn .btn').css('background','rgba(255,255,255,.3)');
            $('#selBtn .btn').eq(BtnIndex).css('background','rgba(255,255,255,1)');
            var level = Math.floor(this.posterItems.size()/2),
            posterItemsLength = this.posterItems.size(),
            index;
            $('.poster-item').filter(function(i,item){
                if($(this).css('z-index') == level){  //得到当前显示的第一帧的下标
                    index = i;
                }
            });
            var nextTime = BtnIndex-index;  //向左旋转nextTime次
            var arr = [],zIndexArr=[];
            for(var i = 0;i < posterItemsLength;i++){   
                arr.push(i);  
            }
            arr = arr.concat(arr);  //添加一个数组，用来模拟Li的下标
            if(nextTime > 0){   //prev 左旋转,把数组的后半部分向前移动nextTime个下标
                self.rotateFlag = false;  //注意这里吧self.rotateFlag这个标识放在里面来修改了。
                this.posterItems.each(function(i, item){
                    var posterItemIndex = arr.lastIndexOf(i);  //得到li节点在arr中对应的下标
                    var tag = $(self.posterItems[arr[posterItemIndex-nextTime]]),
                    width = tag.width(),
                    height = tag.height(),
                    zIndex = tag.css('zIndex'),
                    opacity = tag.css('opacity'),
                    left = tag.css('left'),
                    top = tag.css('top');
                    zIndexArr.push(zIndex);
                    $(item).animate({
                        width : width,
                        height : height,
                        opacity : opacity,
                        left : left,
                        top : top
                    },self.setting.speed,function(){
                        self.rotateFlag = true;   //在每个帧的动画都执行完毕以后，self.rotateFlag改成true，才能执行下一次动画
                    });
                });
                self.posterItems.each(function(i){
                    $(this).css('zIndex',zIndexArr[i]);  //把这个z-index提出来单独改变是为了让z-index这个属性的改变最早执行，而且不须要动画
                });
            }

            if(nextTime < 0){  //next 右旋转,把数组的前半部分向后移动nextTime的绝对值个下标
                self.rotateFlag = false;
                this.posterItems.each(function(i, item){
                    var posterItemIndex = arr.indexOf(i),  //得到li节点在arr中对应的下标
                    tag = $(self.posterItems[arr[posterItemIndex+Math.abs(nextTime)]]),
                    width = tag.width(),
                    height = tag.height(),
                    zIndex = tag.css('zIndex'),
                    opacity = tag.css('opacity'),
                    left = tag.css('left'),
                    top = tag.css('top');
                    zIndexArr.push(zIndex);
                        $(item).animate({
                        width : width,
                        height : height,
                        opacity : opacity,
                        left : left,
                        top : top
                    },self.setting.speed,function(){
                        self.rotateFlag = true;    
                    });
                });
                self.posterItems.each(function(i){
                    $(this).css('zIndex',zIndexArr[i]);
                });
            }
        },

在这里主要遇到了两个问题：

一、如何来得到Carousel中的每一帧在移动以后的下标，而后再把相应下标的属性，添加到相应帧上。

          我这里根据li的长度，来建立一个元素为0-li.length-1的数组，而且再concat自己一次，用里面的元素来标识每一帧移动事后的下标，若是是Carousel须要向左旋转，也就是按钮的下标大于当前的第一帧的下标，那么咱们就须要吧这个数组的后半部分做为每一帧的下标，而且向左移动(按钮下标-当前第一帧下标)个位置，而后这个位置的元素就是每一帧的在旋转事后的下标。若果是向右旋转也是相似。不过就须要把数组的前半部分，前后移动了。

二、当咱们用鼠标在按钮上飞速的移动的时候就会出现一些BUG，这是由于再上一个动画还没执行完毕，下一个事件又被触发了。

          那么这里咱们就须要用一个标识来限制事件的执行，也就是这里的self.rotateFlag。可是在我通过屡次的测试以后，发现吧这个标识赋值为false的语句不能放在旋转的方法前面，这样也会出现问题，当咱们把它放置在方法里面的if条件语句的开头的时候，基本上就没什么问题了。

好了到了这里Carousel扩展的功能就介绍完了。其余的部分就不作介绍了，有兴趣的朋友能够去上面我给出的地址download下来看看。