今天用bootstrap做一個輪播,當輪播滾到每張圖的時候,在頁面下面就顯示相對應的內容,那么問題來了:為了輪播圖的可擴展性,我們肯定需要知道當前活動(顯示圖片)的索引號,查了bootstrap文檔,文檔上並沒有直接提及(最新版的Bootstrap v3.3.7 ),但是在官網其實也簡單有說明:
在網絡上找到的一個.getActiveIndex()方法,他適應於bootsrap v3.0.2,但是這個版本已經不能用了,所以就不再舉例了。
還有的博主說可以擴展成這樣
1 $('#myCarousel').on('slide.bs.carousel', function () { 2 var carouselData = $(this).data('bs.carousel').$active; 3 });
但是對於很多人來說這些將的並不是他們說需求的,而且.$active 只是在點擊圓點的時候才會觸發,自動播放是值是空的。
所以在網上找了很多方法其實都不能用於是自己花了點時間仔細看了bootstrap文檔將代碼改好了
1 $('#myCarousel').on('slide.bs.carousel', function (event) { 2 var $hoder = $('#myCarousel').find('.item'), 3 $items = $(event.relatedTarget); 4 //getIndex就是輪播到當前位置的索引 5 var getIndex= $hoder.index($items); 6 7 8 })
注意:索引都是從0開始的;然后還有很多可以改進的地方大家可以打印參數event里面有很多有用的值
如果大家還有更好的建議或者其他需要幫助的可以留言哦!