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处理事件？

1 个答案: