javascript - 获取 jcarousel 中当前项目的 id

Question

我希望突出显示轮播中当前的点分页按钮，因此我尝试向正在使用的任何特定类添加一个类，由于某种原因，这不起作用，它添加了非事件类，没有任何问题，但没有添加活跃，所以它似乎没有识别出我。 我只是 js 新手，我是否遗漏了一些明显的东西？

jQuery(document).ready(function() {
jQuery('#right-carousel').jcarousel({
    start: 1, // Configuration goes here
    wrap: "circular",
    scroll: 1,
    auto:3,
    vertical:true,

    itemFirstInCallback: {
    onBeforeAnimation: function(carousel, item, index, action, c, o, i, s ) {
        if (carousel_2) {
            carousel_2[action]();
        }
        i = (i - 1) % $('#right-carousel li').size();
        jQuery('.jcarousel-pagination a').addClass('inactive');
            jQuery('.jcarousel-pagination a:eq('+i+')').removeClass('inactive').addClass('active');


    jQuery('.jcarousel-pagination a').bind('click', function() {
    carousel.scroll(jQuery.jcarousel.intval(jQuery(this).attr('id')));
    return false;
        }); 

            }
        }

    });

});

再添加一个细节，主要问题似乎是即使我在函数内声明 i 也没有定义它。

Answer 1

如果您将分页点(.jcarousel-pagination)放入 jcarousel 容器中，此代码应该可以工作。它还应该适用于多个轮播:

jQuery(document).ready(function() {

function mycarousel_initCallback(carousel, state) {
    jQuery(carousel.container).find('.jcarousel-pagination a').bind('click', function() {
      carousel.scroll(parseInt(jQuery(this).attr('id')));
      return false;
    });

    jQuery(carousel.container).find('#mycarousel-next').bind('click', function() {
      carousel.next();
      return false;
    });

    jQuery(carousel.container).find('#mycarousel-prev').bind('click', function() {
      carousel.prev();
      return false;
    });
}

function mycarousel_visibleCallback(carousel, item, index, state){
  var dot = jQuery(carousel.container).find(".jcarousel-pagination a#" + index);
  dot.siblings().removeClass("active");
  dot.addClass("active");
}


jQuery('#right-carousel').jcarousel({
    start: 1, // Configuration goes here
    wrap: "circular",
    scroll: 1,
    auto:3,
    vertical:true,
    initCallback: mycarousel_initCallback,
    itemVisibleInCallback: mycarousel_visibleCallback
    });

});