所有的代码都在这里https://github.com/wwervin72/jquery-carousel
那么说干就干，首先我们要做的就是要把这些按钮显示出来。于是我们就需要在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
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 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]);});}},
在这里主要遇到了两个问题：
1、如何来获得carousel中的每一帧在移动之后的下标，然后再把相应下标的属性，添加到相应帧上。
我这里根据li的长度，来创建一个元素为0-li.length-1的数组，并且再concat本身一次，用里面的元素来标识每一帧移动过后的下标，如果是carousel需要向左旋转，也就是按钮的下标大于当前的第一帧的下标，那么我们就需要吧这个数组的后半部分作为每一帧的下标，并且向左移动(按钮下标-当前第一帧下标)个位置，然后这个位置的元素就是每一帧的在旋转过后的下标。若果是向右旋转也是类似。不过就需要把数组的前半部分，先后移动了。
2、当我们用鼠标在按钮上飞速的移动的时候就会出现一些bug，这是因为再上一个动画还没执行完毕，下一个事件又被触发了。
那么这里我们就需要用一个标识来限制事件的执行，也就是这里的self.rotateflag。但是在我经过多次的测试之后，发现吧这个标识赋值为false的语句不能放在旋转的方法前面，这样也会出现问题，当我们把它放置在方法里面的if条件语句的开头的时候，基本上就没什么问题了。
好了到了这里carousel扩展的功能就介绍完了。其他的部分就不做介绍了，有兴趣的朋友可以去上面我给出的地址download下来看看。同时也非常感谢大家对脚本之家网站的支持！