如何通過bxSlider回調API處理事件？

Question

我在我的網站上使用bxSlider進行幻燈片放映。現在，我想要做的是，用手動控制幻燈片，並顯示文本內容與它下面的幻燈片：

我在這一刻什麼代碼：

<!--SlideShow Pictures--> 
<!--NOTE: We are using a un-organised list--> 
<ul class="slider"> 
    <li><img src="img\hm1.jpg" /></li> 
    <li><img src="img\hm2.jpg" /></li> 
    <li><img src="img\hm3.jpg" /></li> 
    <li><img src="img\hm4.jpg" /></li> 
</ul> 

<!--Script for controlling SlideShow--> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $('.slider').bxSlider(
    { 
     adaptiveHeight: true, 
     mode: 'fade',     
     onSlideAfter: function(){ 

      I need a conditional statement here!` 

      document.getElementById('desc').innerHTML = 'yes it does! (for now)'; 
     } 
    }); 
});  
</script> 

<div id="desc"> 
    Hope this works! 
</div> 

現在我需要的是一個條件語句來檢查正在顯示的圖片（hm1/hm2/hm3/hm4）。我沒有修改bxSlider原始代碼的任何部分。它存在於bxslider.com讓我知道如果你需要更多的信息。

Answer 1

從滑塊的文檔中，onSlideAfter回調函數應該是這樣的：

function($slideElement, oldIndex, newIndex){ // your code here } 

• $ slideElement：目標元素的jQuery的元素
• oldIndex：上一張幻燈片的元素索引（前轉換）
• newIndex：目標幻燈片的元素索引（轉換後）

newIndex變量應該給你你需要的東西。

$(document).ready(function(){ 
    $('.slider').bxSlider({ 
     adaptiveHeight: true, 
     mode: 'fade', 
     onSlideAfter: function($slideElement, oldIndex, newIndex){ 
     switch(newIndex){ 
      case 0 : /*code for slide 1*/; break; 
      case 1 : /*code for slide 2*/; break; 
      /*etc*/ 
     } 
    } 
});