javascript - 将事件标题类添加到当前标题

Question

我找到了这个 fiddle ，并对它进行了一些修改(添加了控件和寻呼机)。现在，当您单击上一个/下一个或寻呼机(1、2、3 等)时，我想将事件类添加到当前标题。

here is a fiddle link

$('.bxslider').bxSlider({
        mode: 'fade',
        captions: false,
        controls: true,
        pager: true,
        auto: true,
        speed: 1000,
        onSlideBefore: function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) {
            console.log(currentSlideHtmlObject);
            $('.active-caption').removeClass('active-caption');
            $(currentSlideHtmlObject).prev().addClass('active-caption')
        },
        onSlideNext: function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) {
            console.log(currentSlideHtmlObject);
            $('.active-caption').removeClass('active-caption');
            $(currentSlideHtmlObject).next().addClass('active-caption')
        },
        onSliderLoad: function () {
            $('#bxsliderCaption>ul>li').eq(0).addClass('active-caption')
       },

        // http://bxslider.com/options 

    });

Answer 1

好的，当 slider 自行更改或用户单击上一个/下一个或寻呼机上的数字之一时，这将使事件标题自动更改。

$(document).ready(function () {
var myCount = 1;
var backwardsCount = 2;

$('.bxslider').bxSlider({
    mode: 'fade',
    captions: false,
    controls: true,
    pager: true,
    auto: true,
    speed: 1000,
    onSlideBefore: function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) {
        console.log(currentSlideHtmlObject);
        $('.active-caption').removeClass('active-caption');
                    $('#bxsliderCaption>ul>li').eq(backwardsCount).addClass('active-caption');
        backwardsCount--;
        if(backwardsCount < 0)
            backwardsCount = 2;
    },
    onSlideNext: function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) {
        console.log(currentSlideHtmlObject);
        $('.active-caption').removeClass('active-caption');
        $('#bxsliderCaption>ul>li').eq(myCount).addClass('active-caption');
        myCount++;
        if(myCount > 2)
            myCount = 0;
    },
    onSliderLoad: function () {
        $('#bxsliderCaption>ul>li').eq(0).addClass('active-caption');
   },

    // http://bxslider.com/options 

});
});