本文是小编自己写的一个给carousel插件添加新功能,关于Carousel插件的教学视频。参考别的网站,当鼠标放在下排按钮上或者点击之后,Carousel就会跟这个按钮相同下标的li作为第一帧显示。
所有的代码都在这里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<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]); }); } },
在这里主要遇到了两个问题:
1、如何来获得Carousel中的每一帧在移动之后的下标,然后再把相应下标的属性,添加到相应帧上。
我这里根据li的长度,来创建一个元素为0-li.length-1的数组,并且再concat本身一次,用里面的元素来标识每一帧移动过后的下标,如果是Carousel需要向左旋转,也就是按钮的下标大于当前的第一帧的下标,那么我们就需要吧这个数组的后半部分作为每一帧的下标,并且向左移动(按钮下标-当前第一帧下标)个位置,然后这个位置的元素就是每一帧的在旋转过后的下标。若果是向右旋转也是类似。不过就需要把数组的前半部分,先后移动了。
2、当我们用鼠标在按钮上飞速的移动的时候就会出现一些BUG,这是因为再上一个动画还没执行完毕,下一个事件又被触发了。
那么这里我们就需要用一个标识来限制事件的执行,也就是这里的self.rotateFlag。但是在我经过多次的测试之后,发现吧这个标识赋值为false的语句不能放在旋转的方法前面,这样也会出现问题,当我们把它放置在方法里面的if条件语句的开头的时候,基本上就没什么问题了。
好了到了这里Carousel扩展的功能就介绍完了。其他的部分就不做介绍了,有兴趣的朋友可以去上面我给出的地址download下来看看。同时也非常感谢大家对网站的支持!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
更新日志
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]