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

Bootstrap轮播图索引及活动焦点对象获取详解

今天在使用Bootstrap制作轮播图时，想要实现一种功能：随着轮播图的滚动，页面上的内容也相应更新。为了实现这一功能，我们需要知道当前活动的轮播图的索引号。在Bootstrap的官方文档中，并没有直接提及此功能。

在网上找到的一些方法，例如“.getActiveIndex()”，只适用于旧版本的Bootstrap（如v3.0.2），在新的版本（如版的Bootstrap v3.3.7）中已不再适用。还有的博主提到了通过监听'slide.bs.carousel'事件来获取活动项的数据，但这种方式在某些情况下并不准确。比如自动播放时，$.active的值可能是空的。

经过深入研究，我找到了一个更可靠的方法。我们可以监听轮播图的'slide.bs.carousel'事件，在该事件触发时获取当前活动项的索引。以下是代码示例：

```javascript

$('myCarousel').on('slide.bs.carousel', function (event) {

var $hoder = $('myCarousel').find('.item'), // 获取所有的轮播项

$items = $(event.relatedTarget); // 获取当前活动的轮播项

// 通过index方法获取当前活动项在所有的轮播项中的索引

var getIndex = $hoderdex($items);

// 注意，索引是从0开始的。

});

```

事件对象event中包含了许多有用的值，你可以通过打印event来查看这些值并进行进一步的开发。

这种方法不仅适用于手动切换轮播图的情况，也适用于自动播放的情况。通过这种方式，我们可以轻松地获取到当前活动轮播图的索引，从而实现根据轮播图的内容来更新页面上的内容。希望这篇文章能对你有所帮助，如果你还有其他问题，欢迎继续。