BootStrap 獲得輪播中的索引和當(dāng)前活動(dòng)的焦點(diǎn)對(duì)象

更新時(shí)間：2017年05月11日 15:07:40 作者：左逸楓

這篇文章主要介紹了BootStrap 獲得輪播中的索引和當(dāng)前活動(dòng)的焦點(diǎn)對(duì)象,本文給大家介紹的非常詳細(xì)，需要的朋友可以參考下

今天用bootstrap做一個(gè)輪播，當(dāng)輪播滾到每張圖的時(shí)候，在頁(yè)面下面就顯示相對(duì)應(yīng)的內(nèi)容，那么問(wèn)題來(lái)了：為了輪播圖的可擴(kuò)展性，我們肯定需要知道當(dāng)前活動(dòng)（顯示圖片）的索引號(hào)，查了bootstrap文檔，文檔上并沒(méi)有直接提及（最新版的Bootstrap v3.3.7 ），但是在官網(wǎng)其實(shí)也簡(jiǎn)單有說(shuō)明：

在網(wǎng)絡(luò)上找到的一個(gè).getActiveIndex()方法，他適應(yīng)于bootsrap v3.0.2，但是這個(gè)版本已經(jīng)不能用了，所以就不再舉例了。

還有的博主說(shuō)可以擴(kuò)展成這樣

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

但是對(duì)于很多人來(lái)說(shuō)這些將的并不是他們說(shuō)需求的，而且.$active 只是在點(diǎn)擊圓點(diǎn)的時(shí)候才會(huì)觸發(fā)，自動(dòng)播放是值是空的。

所以在網(wǎng)上找了很多方法其實(shí)都不能用于是自己花了點(diǎn)時(shí)間仔細(xì)看了bootstrap文檔將代碼改好了

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

注意：索引都是從0開(kāi)始的；然后還有很多可以改進(jìn)的地方大家可以打印參數(shù)event里面有很多有用的值

相關(guān)文章

微信小程序?qū)崿F(xiàn)天氣預(yù)報(bào)功能
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)天氣預(yù)報(bào)功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-07-07
JavaScript中運(yùn)算符規(guī)則和隱式類(lèi)型轉(zhuǎn)換示例詳解
JavaScript中運(yùn)算符規(guī)則的隱式類(lèi)型轉(zhuǎn)換是什么? 這是每個(gè)學(xué)習(xí)Javascript的新手們都應(yīng)該知道的一個(gè)問(wèn)題，下面這篇文章主要給大家介紹了關(guān)于JavaScript中運(yùn)算符規(guī)則和隱式類(lèi)型轉(zhuǎn)換的相關(guān)資料，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。
2017-09-09
淺談Javascript中的12種DOM節(jié)點(diǎn)類(lèi)型
DOM是javascript操作網(wǎng)頁(yè)的接口，全稱(chēng)為文檔對(duì)象模型(Document Object Model)。本文將主要說(shuō)明DOM節(jié)點(diǎn)類(lèi)型，有需要的可以參考借鑒。
2016-08-08
解決Layui 表單提交數(shù)據(jù)為空的問(wèn)題
今天小編就為大家分享一篇解決Layui 表單提交數(shù)據(jù)為空的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08
BootStrap Datetimepicker 漢化的實(shí)現(xiàn)代碼
這篇文章主要介紹了 BootStrap Datetimepicker 漢化的實(shí)現(xiàn)代碼,需要的朋友可以參考下
2017-02-02
基于JS實(shí)現(xiàn)新聞列表無(wú)縫向上滾動(dòng)實(shí)例代碼
當(dāng)新聞?shì)^多，并且空前有限的時(shí)候，使用滾動(dòng)是一個(gè)不錯(cuò)的選擇，本章節(jié)就通過(guò)代碼實(shí)例介紹一下如何實(shí)現(xiàn)此效果，對(duì)無(wú)縫向上滾動(dòng)實(shí)例代碼感興趣的朋友一起學(xué)習(xí)吧
2016-01-01
詳解JS實(shí)現(xiàn)簡(jiǎn)單的時(shí)分秒倒計(jì)時(shí)代碼
這篇文章主要介紹了JS時(shí)分秒倒計(jì)時(shí)的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
JavaScript原生xmlHttp與jquery的ajax方法json數(shù)據(jù)格式實(shí)例
這篇文章主要介紹了JavaScript原生xmlHttp與jquery的ajax方法json數(shù)據(jù)格式實(shí)例的相關(guān)資料,需要的朋友可以參考下
2015-12-12
JS 操作Array數(shù)組的方法及屬性實(shí)例解析
本篇文章主要是對(duì)JS操作Array數(shù)組的方法及屬性進(jìn)行了詳細(xì)的介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2014-01-01
深入理解js中的加載事件
提到加載事件，可能想到了window.onload，但實(shí)際上，加載事件是一大類(lèi)事件，本文將詳細(xì)介紹加載事件。下面跟著小編一起來(lái)看下吧
2017-02-02