Javascript 图像转盘切换时动态范围文本更改

我有一个引导转盘，当“从滑块中的图像”更改文本（span with

class=“image title”

）时，要使alt image的值处于活动状态

例如，如果image1处于活动状态，则范围将类似于image1的

Alt

， 当图像2处于活动状态时，跨度将为

<span>Alt of image 2</span>

图像2的Alt

我该怎么做

演示

您的图像不包含alt属性，因此您需要添加它们以获取alt属性中的文本

我创建了一个函数switchText。它获取活动图像的alt属性的文本，并将其设置为span元素中的文本：

function switchText() {
    $('span').text($('.active img').attr('alt'));   
}

发生“滑动”事件时，需要在回调函数底部调用此新函数：

// bind 'slid' function
$('#myCarousel').bind('slid', function() {

    // remove active class

    $('.carousel-linked-nav .active').removeClass('active');

    // get index of currently active item
    var idx = $('#myCarousel .item.active').index();

    // select currently active item and add active class
    $('.carousel-linked-nav li:eq(' + idx + ')').addClass('active');
    switchText();
});

调用滑动事件时，这些更改将切换文本。但在开始时，span元素中没有文本。要在开始时获取文本，还必须在初始化转盘后直接调用switchText函数：

// invoke the carousel
$('#myCarousel').carousel({
     interval: 3000
});
// use alt text from first image at the beginning
switchText();