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 相关文章推荐
js jquery数组介绍
Jul 15 Javascript
深入了解Node.js中的一些特性
Sep 25 Javascript
JQuery中$.each 和$(selector).each()的区别详解
Mar 13 Javascript
贴近用户体验的Jquery日期、时间选择插件
Aug 19 Javascript
javascript中日期函数new Date()的浏览器兼容性问题
Sep 05 Javascript
AngularJs Javascript MVC 框架
Jun 20 Javascript
AngularJs Injecting Services Into Controllers详解
Sep 02 Javascript
javascript入门之window对象【新手必看】
Nov 22 Javascript
基于javascript实现的购物商城商品倒计时实例
Dec 11 Javascript
React 子组件向父组件传值的方法
Jul 24 Javascript
解决layer弹出层自适应页面大小的问题
Sep 16 Javascript
Vue-axios-post数据后端接不到问题解决
Jan 09 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实现Socket服务器的代码
2008/04/03 PHP
解析CI即CodeIgniter框架在Nginx下的重写规则
2013/06/03 PHP
php中array_multisort对多维数组排序的方法
2020/06/21 PHP
PHP加密技术的简单实现
2016/09/04 PHP
利用PHP访问MySql数据库的逻辑操作以及增删改查的实例讲解
2017/08/30 PHP
关于火狐(firefox)及ie下event获取的两种方法
2012/12/27 Javascript
javascript提取URL的搜索字符串中的参数(自定义函数实现)
2013/01/22 Javascript
jQuery实现提示密码强度的代码
2015/07/15 Javascript
Highcharts学习之数据列
2016/08/03 Javascript
js实现上传文件添加和删除文件选择框
2016/10/24 Javascript
Javascript中字符串replace方法的第二个参数探究
2016/12/05 Javascript
微信小程序 引用其他js文件实现代码
2017/02/22 Javascript
使用 Vue.js 仿百度搜索框的实例代码
2017/05/09 Javascript
Vue自定义指令使用方法详解
2017/08/21 Javascript
vue项目中导入swiper插件的方法
2018/01/30 Javascript
详解JS数值Number类型
2018/02/07 Javascript
Vue中的vue-resource示例详解
2018/11/02 Javascript
原生JavaScript实现刮刮乐
2020/09/29 Javascript
详解详解Python中writelines()方法的使用
2015/05/25 Python
python编程开发之日期操作实例分析
2015/11/13 Python
Python实现时钟显示效果思路详解
2018/04/11 Python
Python查找文件中包含中文的行方法
2018/12/19 Python
纯python进行矩阵的相乘运算的方法示例
2019/07/17 Python
python2爬取百度贴吧指定关键字和图片代码实例
2019/08/14 Python
解决windows上安装tensorflow时报错,“DLL load failed: 找不到指定的模块”的问题
2020/05/20 Python
用python实现前向分词最大匹配算法的示例代码
2020/08/06 Python
让IE6、IE7、IE8支持CSS3的脚本
2010/07/20 HTML / CSS
教你使用Canvas处理图片的方法
2017/11/28 HTML / CSS
应届生人事助理求职信
2013/11/09 职场文书
关于廉洁的广播稿
2014/01/30 职场文书
工作说明书范文
2014/05/07 职场文书
幼儿园保育员责任书
2014/07/22 职场文书
党员应该树立反腐倡廉的坚定意识思想汇报
2014/09/12 职场文书
党的群众路线教育实践活动查摆问题及整改措施
2014/10/10 职场文书
创业计划书之蛋糕店
2019/08/29 职场文书
Mysql基础之常见函数
2021/04/22 MySQL