使用image alt属性值作为轮播中的标题

Question

这是我的小提琴。

http://jsfiddle.net/yX5vr/3/

我想要做的是，只需使用当前活动图片的alt设置h1即可。必须在两种情况下进行设置：当您单击拇指时，或者只是进入页面时，必须将其设置为初始值（第一个图像的alt）。

由于JS的形式有点困难，我无法弄清楚代码的放置位置。有什么建议吗？

Answer 1

在滚动事件上使用回调：

http://jsfiddle.net/isherwood/yX5vr/36

$('.carousel-stage').on('jcarousel:scrollend', function(event, carousel) {
    $('.wrapper h1').text( $(this).jcarousel('visible').find('img').attr('alt') );
});

http://sorgalla.com/jcarousel/docs/reference/events.html#scrollend

---

要获得初始标题，请在init之后的某处添加：

$('.wrapper h1').text( $('.carousel-stage').jcarousel('visible')
    .find('img').attr('alt') );

http://jsfiddle.net/isherwood/yX5vr/37/

Answer 2

你可以这样做

item.on('jcarouselcontrol:active', function() {
    carouselNavigation.jcarousel('scrollIntoView', this);
    item.addClass('active');
    $('.wrapper h1').html($('.carousel-stage img').eq(item.index()).prop('alt'));
});

检查here