jQuery 如何给Carousel插件添加新的功能


Posted in Javascript onApril 18, 2016

本文是小编自己写的一个给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下来看看。同时也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
彻底搞懂JS无缝滚动代码
Jan 03 Javascript
基于jquery实现拆分姓名的方法(纯JS版)
May 08 Javascript
在js文件中如何获取basePath处理js路径问题
Jul 10 Javascript
Bootstrap Table的使用总结
Oct 08 Javascript
jQuery简单自定义图片轮播插件及用法示例
Nov 21 Javascript
bootstrap导航条实现代码
Dec 28 Javascript
html5+canvas实现支持触屏的签名插件教程
May 08 Javascript
Angularjs中数据绑定的实例详解
Aug 25 Javascript
对vue中v-on绑定自定事件的实例讲解
Sep 06 Javascript
JavaScript 引用类型实例详解【数组、对象、严格模式等】
May 13 Javascript
vue实现点击按钮切换背景颜色的示例代码
Jun 23 Javascript
解决vue elementUI 使用el-select 时 change事件的触发问题
Nov 17 Vue.js
AngularJS入门教程之AngularJS模型
Apr 18 #Javascript
AngularJS入门教程之AngularJS指令
Apr 18 #Javascript
AngularJS入门教程之AngularJS表达式
Apr 18 #Javascript
jQuery animate和CSS3相结合实现缓动追逐效果附源码下载
Apr 18 #Javascript
jQuery使用$.each遍历json数组的简单实现方法
Apr 18 #Javascript
jQuery validate+artdialog+jquery form实现弹出表单思路详解
Apr 18 #Javascript
JS中artdialog弹出框控件之提交表单思路详解
Apr 18 #Javascript
You might like
Zerg基本策略
2020/03/14 星际争霸
PHP生成带有雪花背景的验证码
2006/10/09 PHP
PhpMyAdmin出现export.php Missing parameter: what /export_type错误解决方法
2012/08/09 PHP
ThinkPHP使用smarty模板引擎的方法
2014/07/01 PHP
PHP+MySQL实现在线测试答题实例
2020/01/02 PHP
HTML代码中标签的全部属性 中文注释说明
2009/03/26 Javascript
JavaScript 封装Ajax传递的数据代码
2009/06/05 Javascript
onmouseover和onmouseout的一些问题思考
2013/08/14 Javascript
JavaScript计算两个日期时间段内日期的方法
2015/03/16 Javascript
基于jQuery.Hz2Py.js插件实现的汉字转拼音特效
2015/05/07 Javascript
JS获取月份最后天数、最大天数与某日周数的方法
2015/12/08 Javascript
分离与继承的思想实现图片上传后的预览功能:ImageUploadView
2016/04/07 Javascript
[原创]JQuery 在表单提交之前修改 提交的值
2016/04/14 Javascript
JavaScript继承学习笔记【新手必看】
2016/05/10 Javascript
Bootstrap表格和栅格分页实例详解
2016/05/20 Javascript
内容滑动切换效果jquery.hwSlide.js插件封装
2016/07/07 Javascript
ES6所改良的javascript“缺陷”问题
2016/08/23 Javascript
vue项目中在外部js文件中直接调用vue实例的方法比如说this
2019/04/28 Javascript
layui框架与SSM前后台交互的方法
2019/09/12 Javascript
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
2021/01/05 Vue.js
Python中functools模块函数解析
2017/03/12 Python
用python生成1000个txt文件的方法
2018/10/25 Python
python多线程实现代码(模拟银行服务操作流程)
2020/01/13 Python
Python 实现日志同时输出到屏幕和文件
2020/02/19 Python
python实现程序重启和系统重启方式
2020/04/16 Python
亚洲颇具影响力的男性在线购物零售商:His
2019/11/24 全球购物
澳大利亚著名的纺织品品牌:Canningvale
2020/05/05 全球购物
银行员工职业规划范文
2014/01/21 职场文书
中英文求职信范文
2014/01/27 职场文书
幼儿园父亲节活动方案
2014/03/11 职场文书
企业口号大全
2014/06/12 职场文书
电影焦裕禄观后感
2015/06/09 职场文书
雷锋的观后感
2015/06/10 职场文书
学历证明范文
2015/06/16 职场文书
基于MySql验证的vsftpd虚拟用户
2021/11/07 MySQL
利用For循环遍历Python字典的三种方法实例
2022/03/25 Python