热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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

本文给大家介绍如何给Carousel插件添加新的功能,非常方便以后的程序开发,具有参考借鉴价值,感兴趣的朋友一起学习吧

本文是小编自己写的一个给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

然后我们需要在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  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下来看看。同时也非常感谢大家对网站的支持!


推荐阅读
  • http:nickycc.lofter.compost23e2a6_17d6a07http:blog.csdn.netl25000articledetails46842013htt ... [详细]
  • 招聘 | 完美世界信息安全部期待你的加入~
    招聘 | 完美世界信息安全部期待你的加入~ ... [详细]
  • Sequence.js适合电子商务网站的图片滑块
    Sequence.js是一个非常现代的图片滑动效果,特别适合电子商务网站或者企业产品展示功能。带有图片缩率图,能够呈现全屏图片浏览效果。结合CSS3Tr ... [详细]
  • JetBrains RubyMine 2021 for Mac(Ruby代码编辑工具) v2021.2.2中文激活版
    内容介绍RubyMine2021一款全面的Ruby代码编辑器,可以识别动态语言细节。RubyMine破解版提供智能编码辅助,智能代码重构和深度代码分析功能。通过简单的项目配置,自动 ... [详细]
  • 请在电脑上打开以下链接进行下载w3cschool离线版(chm):http:pan.baidu.coms1bniwRCV(最新,2014年10月21日更新)w3cschool离线版(ht ... [详细]
  • css怎样让字体倾斜
    web前端|css教程cssweb前端-css教程党建网源码,vscode显示图片大小,ubuntu黑屏唤醒,tomcat首页出不来,华为爬虫网站,php上传文件改名,宁波seo优 ... [详细]
  • 参考官方:https:docs.autofac.orgenlatestintegrationaspnetcore.html#startup-class有一些变动,现在暂时还没用ne ... [详细]
  • 关于软件工程以及自我的解析
    对于软件工程这个课,一开始就有所期待的,通过以前的了解,觉得通过这个课程能让我们能够快速搭建一种框架,对于软件编程开发及其应用,是对于软件的构造解析,应该是思维上的理论知识。然而第 ... [详细]
  • css3伪类target实现tab切换
    CSS3target伪类不得不说那些事儿(纯CSS实现tab切换)是不是觉得target有点眼熟?!今天要讲的不是HTML的标签里面有个targe ... [详细]
  • Graylog是与ELK可以相提并论的一款集中式日志管理方案,支持数据收集、检索、可视化Dashboard。本节将实践用Graylog来管理Docker日志。Graylog架构Gr ... [详细]
  • mac用于开发使用时间长硬盘会越来越小,速度越来越慢的,亦是花了几分钟研究怎么清理系统的缓存,方法:1,到https:www.omnigroup.commore安装OmniDisk ... [详细]
  • 又给自己挖了一个坑跳进去。KafkaManager使用单例模型获取到一个producer,然而自己代码里用的时候加了一个using然后自己在做测试的时候,for循环加10条数据发送 ... [详细]
  • 本文由编程笔记#小编为大家整理,主要介绍了jQuery——jQuery鼠标事件相关的知识,希望对你有一定的参考价值。##jQuery事件 ... [详细]
  • jeeSite快速二次开发框架
    一.jeeSite之前端弹框插件的应用1.01简述弹框插件jeeSite前端提示框架主要使用了jBox2.3插件(关于jBox此处不做介绍了,可自行百度 ... [详细]
  • 微信html替换右键菜单,jquery右键菜单
    插件描述:一个最简单的,很好看的jQuery右键菜单一个最简单的,很好看的jQuery右键菜单特点唯一的依赖是jQuery。简单的API。 ... [详细]
author-avatar
老毛毛
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有