jquery - 在 JCarousel 中的 alt 属性中显示每个图像下的文本

Question

我正在使用JCarousel在我的网站上创建一个滑块。现在它本身很容易实现，我很难在从 alt 属性获取的每个图像下显示描述。

<div class="jcarousel-wrapper">
    <div class="jcarousel" data-jcarousel="true">
    <ul>                         
        <li><img src="http://www.abcd.com/img1_0.jpg  " width="900" height="290" alt="dfgdfg dfgdfgjpg  "></li>  
        <li><img src="http://www.abcd.com/img2_0.jpg  " width="900" height="290" alt="dfgdfg dfgdfgjpg  "></li>
        <li><img src="http://www.abcd.com/img3_0.jpg  " width="900" height="290" alt="dfgdfg dfgdfgjpg  "></li>
        <li><img src="http://www.abcd.com/img4_0.jpg  " width="900" height="290" alt="dfgdfg dfgdfgjpg  "></li>
        <li><img src="http://www.abcd.com/img5_0.jpg  " width="900" height="290" alt="dfgdfg dfgdfgjpg  "></li>
        <li><img src="http://www.abcd.com/img6_0.jpg  " width="900" height="290" alt="dfgdfg dfgdfgjpg  "></li>

    </ul>
   </div>
</div>

现在，我希望有一些方法可以通过 JS，如果你能在这里提供帮助，我将不胜感激。

谢谢。

Answer 1

你可以这样做：

$('.jcarousel').on('jcarousel:visiblein', 'li', function(event, carousel) {
    var caption = $(this).find("img").prop("alt");
    $('.jcarousel-caption').text(caption);
});

jcarousel-caption在要放置文本的元素上设置类。

工作示例：http: //jsfiddle.net/alan0xd7/yz1r62jq/