获取jcarousel中当前项的id

时间:2013-01-03 09:39:36

标签: javascript jquery

我希望在我的轮播中突出显示当前的点分页按钮,所以我试图将一个类添加到正在使用的任何特定的一个,由于某种原因这不起作用,它添加非活动类没有问题,但没有添加活跃,所以它似乎没有认识到我。 我只是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;
        }); 

            }
        }

    });

});

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

1 个答案:

答案 0 :(得分: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
    });

});