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 globalStorage类代码
Jun 04 Javascript
Jquery 插件开发笔记整理
Jan 17 Javascript
jQuery为iframe的body添加click事件的实现代码
Apr 07 Javascript
jquery一般方法介绍 入门参考
Jun 21 Javascript
a标签的href和onclick 的事件的区别介绍
Jul 26 Javascript
window.opener用法和用途实例介绍
Aug 19 Javascript
javascript在网页中实现读取剪贴板粘贴截图功能
Jun 07 Javascript
jquery带下拉菜单和焦点图代码分享
Aug 24 Javascript
使用bat打开多个cmd窗口执行gulp、node
Feb 17 Javascript
JS使用cookie实现只出现一次的广告代码效果
Apr 22 Javascript
微信小程序地图导航功能实现完整源代码附效果图(推荐)
Apr 28 Javascript
Vue向后台传数组数据,springboot接收vue传的数组数据实例
Nov 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.2.1图片验证码实现方法
2016/08/19 PHP
Yii2 队列 shmilyzxt/yii2-queue 简单概述
2017/08/02 PHP
php利用ob_start()清除输出和选择性输出的方法
2018/01/18 PHP
PHP与Web页面交互操作实例分析
2020/06/02 PHP
对textarea框的代码调试,而且功能上使用非常方便,酷
2006/06/30 Javascript
js 复制或插入Html的实现方法小结
2010/05/19 Javascript
javascript中简单的进制转换代码实例
2013/10/26 Javascript
text-align:justify实现文本两端对齐 兼容IE
2015/08/19 Javascript
深入浅析JavaScript中对事件的三种监听方式
2015/09/29 Javascript
jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码
2015/10/30 Javascript
JavaScript动态插入CSS的方法
2015/12/10 Javascript
js实现页面跳转的五种方法推荐
2016/03/10 Javascript
jQuery中iframe的操作(点击按钮新增窗口)
2016/04/20 Javascript
深入浅析knockout源码分析之订阅
2016/07/12 Javascript
js 将图片连接转换成base64格式的简单实例
2016/08/10 Javascript
基于JavaScript实现随机颜色输入框
2016/12/10 Javascript
浅谈JavaScript的自动垃圾收集机制
2016/12/15 Javascript
详解webpack异步加载业务模块
2017/06/23 Javascript
详解Node中导入模块require和import的区别
2017/08/11 Javascript
JavaScript数组方法的错误使用例子
2018/09/13 Javascript
Vue实现页面添加水印功能
2019/11/09 Javascript
JS实现斐波那契数列的五种方式(小结)
2020/09/09 Javascript
python获得linux下所有挂载点(mount points)的方法
2015/04/29 Python
Python实现密钥密码(加解密)实例详解
2020/04/26 Python
CSS3 实现弹幕的示例代码
2017/08/07 HTML / CSS
天猫超市:阿里巴巴打造的网上超市
2016/11/02 全球购物
俄罗斯花园种植材料批发和零售网上商店:Беккер
2019/07/22 全球购物
MUGLER官方网站:蒂埃里·穆勒香水
2019/11/26 全球购物
网络方面基础面试题
2012/11/16 面试题
成功的餐厅经营创业计划书
2014/01/15 职场文书
中级会计职业生涯规划书
2014/03/01 职场文书
《狮子和兔子》教学反思
2014/03/02 职场文书
副总经理岗位职责
2014/03/16 职场文书
村党组织公开承诺书
2015/04/30 职场文书
地道战观后感2000字
2015/06/04 职场文书
优化Mysql查询的示例
2022/04/26 MySQL