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 相关文章推荐
JavaScript语言中的Literal Syntax特性分析
Mar 08 Javascript
excel操作之Add Data to a Spreadsheet Cell
Jun 12 Javascript
Ext.MessageBox工具类简介
Dec 10 Javascript
禁用JavaScript控制台调试的方法
Mar 07 Javascript
Js保留小数点的4种效果实现代码分享
Apr 12 Javascript
jQuery事件详解
Feb 23 Javascript
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
Jun 26 jQuery
JavaScript正则表达式的贪婪匹配和非贪婪匹配
Sep 05 Javascript
详解Vue-Router源码分析路由实现原理
May 15 Javascript
vue页面切换项目实现转场动画的方法
Nov 12 Javascript
vue中el-input绑定键盘按键(按键修饰符)
Jul 22 Javascript
解决antd日期选择组件,添加value就无法点击下一年和下一月问题
Oct 29 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
joomla jce editor 解决上传中文名文件失败问题
2013/06/09 PHP
解析php根据ip查询所在地区(非常有用,赶集网就用到)
2013/07/01 PHP
laravel 字段格式化 modle 字段类型转换方法
2019/09/30 PHP
javascript知识点收藏
2007/02/22 Javascript
基于jquery的超简单上下翻
2010/04/20 Javascript
来自qq的javascript面试题
2010/07/24 Javascript
使用jquery mobile做幻灯播放效果实现步骤
2013/01/04 Javascript
JavaScript返回网页中超链接数量的方法
2015/04/03 Javascript
jQuery使用ajax跨域获取数据的简单实例
2016/05/18 Javascript
JavaScript获取ul中li个数的方法
2017/02/13 Javascript
Bootstrap 3 按钮标签实例代码
2017/02/21 Javascript
基于JS实现bookstore静态页面的实例代码
2017/02/22 Javascript
Vue的Flux框架之Vuex状态管理器
2017/07/30 Javascript
Vue中的v-for指令不起效果的解决方法
2018/09/27 Javascript
微信小程序点击顶部导航栏切换样式代码实例
2019/11/12 Javascript
python Django框架实现自定义表单提交
2016/03/25 Python
python pcm音频添加头转成Wav格式文件的方法
2019/01/09 Python
python按照多个条件排序的方法
2019/02/08 Python
详解Python3中setuptools、Pip安装教程
2019/06/18 Python
如何不用安装python就能在.NET里调用Python库
2019/07/12 Python
浅析Windows 嵌入python解释器的过程
2019/07/26 Python
使用matplotlib绘制图例标签中带有公式的图
2019/12/13 Python
解决django xadmin主题不显示和只显示bootstrap2的问题
2020/03/30 Python
python3实现语音转文字(语音识别)和文字转语音(语音合成)
2020/10/14 Python
详解如何在css3打包后自动追加前缀插件:autoprefixer
2018/12/18 HTML / CSS
Tiqets荷兰:出售欧洲最美丽的景点和博物馆门票
2018/01/09 全球购物
PHP如何对用户密码进行加密
2014/07/31 面试题
三分钟演讲稿范文
2014/04/24 职场文书
幼儿园师德师风学习材料
2014/05/29 职场文书
场地使用证明模板
2014/10/25 职场文书
怎么写工作检讨书
2014/11/16 职场文书
小型企业的绩效考核制度模板
2019/11/21 职场文书
eclipse创建项目没有dynamic web的解决方法
2021/06/24 Java/Android
Go 语言下基于Redis分布式锁的实现方式
2021/06/28 Golang
攻击最高的10只幽灵系神奇宝贝,坚盾剑怪排第一,第五最为可怕
2022/03/18 日漫
Java十分钟精通进阶适配器模式
2022/04/06 Java/Android