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 相关文章推荐
贴一个在Mozilla中常用的Javascript代码
Jan 09 Javascript
jQuery入门第一课 jQuery选择符
Mar 14 Javascript
多次注册事件会导致一个事件被触发多次的解决方法
Aug 12 Javascript
jquery链式操作的正确使用方法
Jan 06 Javascript
分享一则JavaScript滚动条插件源码
Mar 03 Javascript
JavaScript使用slice函数获取数组部分元素的方法
Apr 06 Javascript
手机Web APP如何实现分享多平台功能
Aug 19 Javascript
详解Javascript数据类型的转换规则
Dec 12 Javascript
微信公众号H5支付接口调用方法
Jan 10 Javascript
jQuery实现的点击图片居中放大缩小功能示例
Jan 16 jQuery
JavaScript实现左右滚动电影画布
Feb 06 Javascript
AJAX学习笔记
May 18 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
安装PHP可能遇到的问题“无法载入mysql扩展” 的解决方法
2007/04/16 PHP
PHP中__get()和__set()的用法实例详解
2013/06/04 PHP
2款PHP无限级分类实例代码
2015/11/11 PHP
PHP仿微信发红包领红包效果
2016/10/30 PHP
PHP实现的回溯算法示例
2017/08/15 PHP
PHP 构造函数和析构函数原理与用法分析
2020/04/21 PHP
JavaScript 高级语法介绍
2009/06/15 Javascript
JavaScript调用Activex控件的事件的实现方法
2010/04/11 Javascript
JQuery记住用户名和密码的具体实现
2014/04/04 Javascript
ie8下修改input的type属性报错的解决方法
2014/09/16 Javascript
js查看一个函数的执行时间实例代码
2015/09/12 Javascript
JavaScript ES6常用基础知识总结
2019/02/09 Javascript
VuePress 快速踩坑小结
2019/02/14 Javascript
vuex实现购物车功能
2020/06/28 Javascript
[01:14]英雄,所敬略同——2018完美盛典宣传视频4K
2018/12/05 DOTA
python进阶教程之模块(module)介绍
2014/08/30 Python
Python自定义类的数组排序实现代码
2016/08/28 Python
Python字符串拼接六种方法介绍
2017/12/18 Python
pycharm 实现显示project 选项卡的方法
2019/01/17 Python
python利用跳板机ssh远程连接redis的方法
2019/02/19 Python
OpenCV里的imshow()和Matplotlib.pyplot的imshow()的实现
2019/11/25 Python
Python 中的pygame安装与配置教程详解
2020/02/10 Python
python 遗传算法求函数极值的实现代码
2020/02/11 Python
python GUI库图形界面开发之PyQt5表单布局控件QFormLayout详细使用方法与实例
2020/03/06 Python
解决python3.x安装numpy成功但import出错的问题
2020/11/17 Python
Rockport乐步美国官网:风靡美国的白宫鞋
2016/11/24 全球购物
ghd澳大利亚官方网站:英国最受欢迎的美发工具品牌
2018/05/21 全球购物
美国家居装饰店:Pier 1
2019/09/04 全球购物
What is EJB
2016/07/22 面试题
毕业求职自荐信格式是什么
2013/11/19 职场文书
法律进社区实施方案
2014/03/21 职场文书
党性观念心得体会
2014/09/03 职场文书
警示教育片观后感
2015/06/17 职场文书
环境卫生整治简报
2015/07/20 职场文书
导游词之江西赣州
2019/10/15 职场文书
股东合作协议书模板2篇
2019/11/05 职场文书