Javascript 获取图像标题表单bxslider以在滑块外部的自己的div中显示时出现问题

好的，我对BXSlider有一些问题。这是一个很棒的工具，但我正试图让图像标题显示在一个单独的div中，因为我不喜欢滑块转换标题的方式，希望标题保持在滑块上方悬停，并相应地更新div的内容

以下是我目前掌握的代码：

$(document).ready(function () {

   $('.bxslider').bxSlider({
       auto: true,
       autoControls: false,
       pager: false,
       startSlide: 0,
       onSliderLoad: function (currentSlide) {
          $("#slidercaption").empty();
          $("#slidercaption").append($('.bxslider').children().eq(currentSlide).find('img:first').attr('title'));
       },
       onSlideAfter: function (totalSlides, currentSlide) {
          $("#slidercaption").empty();
          $("#slidercaption").append($('.bxslider').children().eq(currentSlide - 1).find('img').attr('title'));
       }
   });
});

我还尝试了中建议的对jquery.bxslider.js的修改，但这不会像上面的代码那样在第一次加载时呈现标题

以下是滑块的HTML：

<div id="sliderHome">
    <ul class="bxslider">                    
        <li><img id="0" src="http://placehold.it/1024x350" title="Slide 1" /></li>
        <li><img id="1" src="http://placehold.it/1024x350" title="Slide 2" /></li>
        <li><img id="2" src="http://placehold.it/1024x350" title="Slide 3" /></li>
    </ul>
</div>

<div id="slidercaption"></div>

我有一个浮动在滑块上方的div：

<div id="sliderHome">
    <ul class="bxslider">                    
        <li><img id="0" src="http://placehold.it/1024x350" title="Slide 1" /></li>
        <li><img id="1" src="http://placehold.it/1024x350" title="Slide 2" /></li>
        <li><img id="2" src="http://placehold.it/1024x350" title="Slide 3" /></li>
    </ul>
</div>

<div id="slidercaption"></div>

我遇到的问题是，它为图像显示了不正确的标题，我确信这是bx克隆幻灯片的问题，但无法找到停止克隆的方法

---

这方面的任何帮助都将非常有用：）

您的权利，即

克隆

正在放弃您的

滑动加载功能。。但是索引确实与您为每个图像设置的id对齐

以下是我的想法：

$(document).ready(function () {
   $('.bxslider').bxSlider({
       auto: true,
       autoControls: false,
       pager: false,
       startSlide: 0,
       onSliderLoad: function (currentSlide) {          
           $('#slidercaption').html($('#'+currentSlide).attr('title')); 
       },
       onSlideAfter: function (currentSlide) {
           $('#slidercaption').html(currentSlide.find('img').attr('title'));
       }
   });
});

更新

onSliderLoad: function (currentSlide) {          
    $('#slidercaption').html($('.bxslider li img:last').attr('title')); 
}

范例

@Danofman如果回答了您的问题，请将此答案标记为已接受。谢谢你下班后的工作。onSliderLoad部分没有给出标题。不明白为什么…@KB它应该能用。。至少在这个例子中是这样。。你的html肯定有些不同。您的图像上是否设置了
ID
？您是对的，错过了图像上的ID。干得好，非常感谢！还有一个问题。是否可以不使用图像ID？当然，您可以选择最后一个滑块图像标题，而不是按ID选择滑块加载上的
title。这似乎是第一张照片的复制品。至少在以下情况下它是有效的：希望相同的模式对bxslider的所有实例都是正确的，但我认为它会。