Question

好的，所以我遇到了BXSlider的问题。这是一个很棒的工具，但我试图让图像标题显示在一个单独的div中，因为我不喜欢滑块转换字幕的方式，并希望保持标题悬停在滑块上方并相应地更新div的内容。 / p>

这是我目前的代码：

$(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'));
       }
   });
});

我也按照captions in own div outside of slider中的建议尝试了对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：

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

我遇到的问题是它显示的图像标题不正确，我确定它是由于bx-clone幻灯片而无法找到阻止克隆的方法。

对此的任何帮助都会很棒：）

Answer 1

您clones正在抛弃onSliderLoad功能的权利..但索引确实与您为每张图片设置的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')); 
}

实施例

http://jsfiddle.net/trevordowdle/vgJ9X/17/

无法获取图像标题形式bxslider显示在滑块外部的自己的div中

1 个答案: