如何通过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*/
        }
    }
});

如何通过bxSlider回调处理事件api？

How to handle an event through bxSlider callback api?

html

javascript

jquery

slider

bxslider