0

0

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

php中文网

php中文网

发布时间:2016-05-16 15:05:00

|

1545人浏览过

|

来源于php中文网

原创

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

在这里主要遇到了两个问题:

酷维CMS企业网站程序1.0
酷维CMS企业网站程序1.0

后台主要功能如下:1) 系统管理:管理员管理,网站配置,上传文件管理,QQ-MSN 在线客服设置。2) 企业信息:后台自由添加修改企业的各类信息及介绍。3) 产品管理:产品类别新增修改管理,产品添加修改以及产品的审核。4) 调查管理:发布修改新调查。5) 会员管理:查看修改删除会员资料,及锁定解锁功能。可在线给会员发信!6) 新闻管理:能分大类和小类新闻,不再受新闻栏目的限制。7) 留言管理:管理

下载

1、如何来获得Carousel中的每一帧在移动之后的下标,然后再把相应下标的属性,添加到相应帧上。

我这里根据li的长度,来创建一个元素为0-li.length-1的数组,并且再concat本身一次,用里面的元素来标识每一帧移动过后的下标,如果是Carousel需要向左旋转,也就是按钮的下标大于当前的第一帧的下标,那么我们就需要吧这个数组的后半部分作为每一帧的下标,并且向左移动(按钮下标-当前第一帧下标)个位置,然后这个位置的元素就是每一帧的在旋转过后的下标。若果是向右旋转也是类似。不过就需要把数组的前半部分,先后移动了。

2、当我们用鼠标在按钮上飞速的移动的时候就会出现一些BUG,这是因为再上一个动画还没执行完毕,下一个事件又被触发了。

那么这里我们就需要用一个标识来限制事件的执行,也就是这里的self.rotateFlag。但是在我经过多次的测试之后,发现吧这个标识赋值为false的语句不能放在旋转的方法前面,这样也会出现问题,当我们把它放置在方法里面的if条件语句的开头的时候,基本上就没什么问题了。

好了到了这里Carousel扩展的功能就介绍完了。其他的部分就不做介绍了,有兴趣的朋友可以去上面我给出的地址download下来看看。同时也非常感谢大家对本站网站的支持!

相关专题

更多
php源码安装教程大全
php源码安装教程大全

本专题整合了php源码安装教程,阅读专题下面的文章了解更多详细内容。

65

2025.12.31

php网站源码教程大全
php网站源码教程大全

本专题整合了php网站源码相关教程,阅读专题下面的文章了解更多详细内容。

43

2025.12.31

视频文件格式
视频文件格式

本专题整合了视频文件格式相关内容,阅读专题下面的文章了解更多详细内容。

35

2025.12.31

不受国内限制的浏览器大全
不受国内限制的浏览器大全

想找真正自由、无限制的上网体验?本合集精选2025年最开放、隐私强、访问无阻的浏览器App,涵盖Tor、Brave、Via、X浏览器、Mullvad等高自由度工具。支持自定义搜索引擎、广告拦截、隐身模式及全球网站无障碍访问,部分更具备防追踪、去谷歌化、双内核切换等高级功能。无论日常浏览、隐私保护还是突破地域限制,总有一款适合你!

41

2025.12.31

出现404解决方法大全
出现404解决方法大全

本专题整合了404错误解决方法大全,阅读专题下面的文章了解更多详细内容。

204

2025.12.31

html5怎么播放视频
html5怎么播放视频

想让网页流畅播放视频?本合集详解HTML5视频播放核心方法!涵盖<video>标签基础用法、多格式兼容(MP4/WebM/OGV)、自定义播放控件、响应式适配及常见浏览器兼容问题解决方案。无需插件,纯前端实现高清视频嵌入,助你快速打造现代化网页视频体验。

9

2025.12.31

关闭win10系统自动更新教程大全
关闭win10系统自动更新教程大全

本专题整合了关闭win10系统自动更新教程大全,阅读专题下面的文章了解更多详细内容。

8

2025.12.31

阻止电脑自动安装软件教程
阻止电脑自动安装软件教程

本专题整合了阻止电脑自动安装软件教程,阅读专题下面的文章了解更多详细教程。

3

2025.12.31

html5怎么使用
html5怎么使用

想快速上手HTML5开发?本合集为你整理最实用的HTML5使用指南!涵盖HTML5基础语法、主流框架(如Bootstrap、Vue、React)集成方法,以及无需安装、直接在线编辑运行的平台推荐(如CodePen、JSFiddle)。无论你是新手还是进阶开发者,都能轻松掌握HTML5网页制作、响应式布局与交互功能开发,零配置开启高效前端编程之旅!

2

2025.12.31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Bootstrap 5教程
Bootstrap 5教程

共46课时 | 2.7万人学习

Webpack4.x---十天技能课堂
Webpack4.x---十天技能课堂

共20课时 | 1.4万人学习

PHP入门到实战消息队列RabbitMQ
PHP入门到实战消息队列RabbitMQ

共22课时 | 1.3万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号