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

How to handle an event through bxSlider callback api?

本文关键字：api 处理事件 回调 bxSlider 何通过      更新时间：2023-09-26

我在我的网站上使用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上。如果你需要更多信息，请告诉我。

从滑块的文档中，onSlideAfter回调函数应该如下所示：

function($slideElement, oldIndex, newIndex){ // your code here }
  • $slideElement:destination元素的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*/
        }
    }
});
相关文章：