jcarousel,我需要:外部控件的活动状态

Question

我正在运行Jcarousel,我想在当前的分页选项中添加a.active.我已经看过其他关于同样事情的帖子.

<script type="text/javascript">
/**
 * We use the initCallback callback
 * to assign functionality to the controls
 */
function mycarousel_initCallback(carousel) {
    jQuery('.jcarousel-control a').bind('click', function() {
        carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
        return false;
    });
}

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

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

// Ride the carousel...
jQuery(document).ready(function() {
    jQuery("#mycarousel").jcarousel({
        scroll: 1,
        initCallback: mycarousel_initCallback,
        // This tells jCarousel NOT to autobuild prev/next buttons
        buttonNextHTML: null,
        buttonPrevHTML: null
    });
});
</script> 

这是初始化代码

和分页生活在里面:

<ul class="jcarousel-control">
    <%  (1..@project.size).each do |n| %>
        <li><a href="#"><%= n %></a></li>
    <% end %> 
</ul>`

它是一个rails应用程序,因此rails根据组中的项目数创建列表.

有任何想法吗？看起来它应该很简单..但我根本不知道js.

Answer 1

我也需要这个,最后找到了解决方案,这是我的代码:

jQuery("#mycarousel").jcarousel({
        scroll: 1,
        initCallback: mycarousel_initCallback,
        // This tells jCarousel NOT to autobuild prev/next buttons
        buttonNextHTML: null,
        buttonPrevHTML: null,
        itemVisibleInCallback: {
            onAfterAnimation: function(c, o, i, s) {
            --i;
              jQuery('.jcarousel-control a').removeClass('active').addClass('inactive');
              jQuery('.jcarousel-control a:eq('+i+')').removeClass('inactive').addClass('active');
            }
          }
    });