BootStrap 获得轮播中的索引和当前活动的焦点对象


Posted in Javascript onMay 11, 2017

今天用bootstrap做一个轮播,当轮播滚到每张图的时候,在页面下面就显示相对应的内容,那么问题来了:为了轮播图的可扩展性,我们肯定需要知道当前活动(显示图片)的索引号,查了bootstrap文档,文档上并没有直接提及(最新版的Bootstrap v3.3.7 ),但是在官网其实也简单有说明:

BootStrap 获得轮播中的索引和当前活动的焦点对象

在网络上找到的一个.getActiveIndex()方法,他适应于bootsrap v3.0.2,但是这个版本已经不能用了,所以就不再举例了。

还有的博主说可以扩展成这样

$('#myCarousel').on('slide.bs.carousel', function () {
       var carouselData = $(this).data('bs.carousel').$active; 
     });

但是对于很多人来说这些将的并不是他们说需求的,而且.$active 只是在点击圆点的时候才会触发,自动播放是值是空的。

所以在网上找了很多方法其实都不能用于是自己花了点时间仔细看了bootstrap文档将代码改好了

$('#myCarousel').on('slide.bs.carousel', function (event) {
        var $hoder = $('#myCarousel').find('.item'),
          $items = $(event.relatedTarget);
        //getIndex就是轮播到当前位置的索引
        var getIndex= $hoder.index($items);
      })

注意:索引都是从0开始的;然后还有很多可以改进的地方大家可以打印参数event里面有很多有用的值

Javascript 相关文章推荐
基于jQuery试卷自动排版系统
Jul 18 Javascript
基于jquery实现状态限定编辑的代码
Feb 11 Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
May 09 Javascript
详解JavaScript对象类型
Jun 16 Javascript
深入浅出ES6新特性之函数默认参数和箭头函数
Aug 01 Javascript
easyui tree带checkbox实现单选的简单实例
Nov 07 Javascript
JS去掉字符串中所有的逗号
Oct 18 Javascript
JavaScript动态添加数据到表单并提交的几种方式
Jun 26 Javascript
pageGroup.js实现分页功能
Jul 27 Javascript
微信小程序实现吸顶特效
Jan 08 Javascript
vue 动态组件(component :is) 和 dom元素限制(is)用法说明
Sep 04 Javascript
解决vue数据不实时更新的问题(数据更改了,但数据不实时更新)
Oct 27 Javascript
微信小程序 navbar实例详解
May 11 #Javascript
微信小程序 图片宽高自适应详解
May 11 #Javascript
bootstrap fileinput组件整合Springmvc上传图片到本地磁盘
May 11 #Javascript
微信小程序 刷新上拉下拉不会断详细介绍
May 11 #Javascript
微信小程序图片选择、上传到服务器、预览(PHP)实现实例
May 11 #Javascript
微信小程序 setData使用方法及常用错误解决办法
May 11 #Javascript
jQuery zTree树插件动态加载实例代码
May 11 #jQuery
You might like
玩转虚拟域名◎+ .
2006/10/09 PHP
PHP脚本数据库功能详解(中)
2006/10/09 PHP
某大型网络公司应聘时的笔试题目附答案
2008/03/27 PHP
php 时间计算问题小结
2009/01/04 PHP
php 删除数组元素
2009/01/16 PHP
PHP中file_exists函数不支持中文名的解决方法
2014/07/26 PHP
JavaScript入门之事件、cookie、定时等
2011/10/21 Javascript
Jquery对象和Dom对象的区别分析
2014/11/20 Javascript
JavaScript实现弹出子窗口并传值给父窗口
2014/12/18 Javascript
一种基于浏览器的自动小票机打印实现方案(js版)
2016/07/26 Javascript
微信小程序 ecshop地址三级联动实现实例代码
2017/02/28 Javascript
Express + Node.js实现登录拦截器的实例代码
2017/07/01 Javascript
jQuery+ajax实现修改密码验证功能实例详解
2017/07/06 jQuery
jQuery实现的手动拖动控制进度条效果示例【测试可用】
2018/04/18 jQuery
vue中子组件向父组件传递数据的实例代码(实现加减功能)
2018/04/20 Javascript
Vue CLI3中使用compass normalize的方法
2019/05/30 Javascript
js获取对象,数组所有属性键值(key)和对应值(value)的方法示例
2019/06/19 Javascript
微信小程序实现3D轮播图效果(非swiper组件)
2019/09/21 Javascript
javascript 函数的暂停和恢复实例详解
2020/04/25 Javascript
Python实现将数据库一键导出为Excel表格的实例
2016/12/30 Python
Python简单网络编程示例【客户端与服务端】
2017/05/26 Python
Python使用django框架实现多人在线匿名聊天的小程序
2017/11/29 Python
Django实现列表页商品数据返回教程
2020/04/03 Python
解决python使用list()时总是报错的问题
2020/05/05 Python
css3的transition效果和transfor效果示例介绍
2013/10/30 HTML / CSS
中国电子产品外贸网站:MiniIntheBox
2017/02/06 全球购物
德国运动营养和健身网上商店:Myprotein.de
2018/07/18 全球购物
请解释接口的显式实现有什么意义
2012/05/26 面试题
linux面试题参考答案(1)
2016/01/22 面试题
小学教师岗位职责
2013/11/25 职场文书
大学生毕业求职自荐书范文
2014/02/04 职场文书
团队拓展活动方案
2014/08/28 职场文书
交通事故案件代理词
2015/05/23 职场文书
药品销售员2015年终工作总结
2015/10/22 职场文书
vue项目两种方式实现竖向表格的思路分析
2021/04/28 Vue.js
Python实现将多张图片合成MP4视频并加入背景音乐
2022/04/28 Python