BootStrap 获得轮播中的索引和当前活动的焦点对象
更新时间：2017年05月11日 15:07:40 作者：左逸枫
这篇文章主要介绍了BootStrap 获得轮播中的索引和当前活动的焦点对象,本文给大家介绍的非常详细，需要的朋友可以参考下
今天用bootstrap做一个轮播，当轮播滚到每张图的时候，在页面下面就显示相对应的内容，那么问题来了：为了轮播图的可扩展性，我们肯定需要知道当前活动（显示图片）的索引号，查了bootstrap文档，文档上并没有直接提及（最新版的Bootstrap v3.3.7 ），但是在官网其实也简单有说明：
在网络上找到的一个.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中的分支结构。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-07-07
这篇文章主要为大家介绍了JavaScript中高级语法??表达式用法示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
众所周知echarts是一个纯JavaScript的图标库,下面这篇文章主要给大家介绍了关于Echarts实例之树形图表的实现方法,需要的朋友可以参考下2021-08-08
本篇文章主要是对js处理自己不能定义二维数组的方法进行了介绍，需要的朋友可以过来参考下，希望读大家有所帮助2014-03-03
这篇文章主要为大家详细介绍了js+canvas实现网站背景鼠标吸附线条动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
javascript中的数字与字符串相加实例分析，学习js的朋友可以参考下。2011-08-08
使用window.postMessage()方法在两个网页间传递数据
这篇文章介绍了使用window.postMessage()在两个网页间传递数据的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-06-06
这篇文章主要介绍了JavaScript获得指定对象大小的方法,涉及javascript针对元素遍历与属性操作的相关技巧,需要的朋友可以参考下2015-07-07
这篇文章主要为大家介绍了JavaScript稀疏数组与孔hole示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-06-06
这篇文章主要介绍了JS动态修改图片的URL（src）的方法,涉及javascript操作图片src属性的技巧,非常具有实用价值,需要的朋友可以参考下2015-04-04
最新评论