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 相关文章推荐
escape、encodeURI、encodeURIComponent等方法的区别比较
Dec 27 Javascript
Jquery 模板数据绑定插件的使用方法详解
Jul 08 Javascript
用js代码改变单选框选中状态的简单实例
Dec 18 Javascript
浅谈被jQuery抛弃的函数及替代函数
May 03 Javascript
jQuery实现鼠标滑过点击事件音效试听
Aug 31 Javascript
jQuery 选择符详细介绍及整理
Dec 02 Javascript
vue 内置过滤器的使用总结(附加自定义过滤器)
Dec 11 Javascript
Vue组件的使用及个人理解与介绍
Feb 09 Javascript
JS实现简单的抽奖转盘效果示例
Feb 16 Javascript
JavaScript基于面向对象实现的无缝滚动轮播示例
Jan 17 Javascript
详谈vue中router-link和传统a链接的区别
Jul 22 Javascript
原生JavaScript实现弹幕组件的示例代码
Oct 12 Javascript
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
ThinkPHP3.1新特性之对分组支持的改进与完善概述
2014/06/19 PHP
分享PHP守护进程类
2015/12/30 PHP
关于Javascript与iframe的那些事儿
2013/07/04 Javascript
js 限制input只能输入数字、字母和汉字等等
2013/12/18 Javascript
js中Math之random,round,ceil,floor的用法总结
2013/12/26 Javascript
js中的caller和callee属性介绍和例子
2014/06/07 Javascript
JavaScript不刷新实现浏览器的前进后退功能
2014/11/05 Javascript
JS函数this的用法实例分析
2015/02/05 Javascript
javaScript中slice函数用法实例分析
2015/06/08 Javascript
JavaScript跨域调用基于JSON的RESTful API
2016/07/09 Javascript
微信小程序 使用canvas制作K线实例详解
2017/01/12 Javascript
js获取元素下的第一级子元素的方法(推荐)
2017/03/05 Javascript
详解如何在项目中使用jest测试react native组件
2018/02/09 Javascript
JQuery样式操作、click事件以及索引值-选项卡应用示例
2019/05/14 jQuery
前端js中的事件循环eventloop机制详解
2019/05/15 Javascript
vue实现滑动到底部加载更多效果
2020/10/27 Javascript
layui的表单验证支持ajax判断用户名是否重复的实例
2019/09/06 Javascript
vue 使用post/get 下载导出文件操作
2020/08/07 Javascript
jQuery+ajax实现用户登录验证
2020/09/13 jQuery
初学Python实用技巧两则
2014/08/29 Python
Python在线运行代码助手
2016/07/15 Python
Python多线程经典问题之乘客做公交车算法实例
2017/03/22 Python
django中send_mail功能实现详解
2018/02/06 Python
Python 3.x基于Xml数据的Http请求方法
2018/12/28 Python
Python插入Elasticsearch操作方法解析
2020/01/19 Python
Centos7下源码安装Python3 及shell 脚本自动安装Python3的教程
2020/03/07 Python
解决python虚拟环境切换无效的问题
2020/04/30 Python
详解python中GPU版本的opencv常用方法介绍
2020/07/24 Python
雅诗兰黛旗下专业男士保养领导品牌:Lab Series
2017/05/15 全球购物
十岁生日同学答谢词
2014/01/19 职场文书
中学生自我评价范文
2014/02/08 职场文书
2014年重阳节老干部座谈会局领导发言稿
2014/09/25 职场文书
2015年艾滋病宣传活动总结
2015/03/27 职场文书
2019入党申请书范文3篇
2019/08/21 职场文书
Java 死锁解决方案
2022/05/11 Java/Android
MySQL自定义函数及触发器
2022/08/05 MySQL