jcarousel，我需要：外部控件的活动状态答案

【问题标题】：jcarousel, I need :active state on external controlsjcarousel，我需要：外部控件的活动状态
【发布时间】：2010-03-03 06:47:31
【问题描述】：

我正在运行一个 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。

【问题讨论】：

标签： javascript jquery html ruby-on-rails

【解决方案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');
            }
          }
    });

【讨论】：

如果您使用的是圆形旋转，您需要使用i = (i - 1) % $('#mycarousel li').size(); 而不是--i;
绝妙的解决方案！使用wrap: 'last' 无需更改即可工作。

【解决方案2】：

使用var size = c.options.size; i = (((i - 1) % size) + size) % size; 代替--i;。此代码修复了负值的模数。

【讨论】：

很棒的东西。把我的头发拉了半天，以获得第二个增加索引以突出正确的外部控制:)

【解决方案3】：

好的，所以我想我自己想出了一个。首先，如果您只是提供

 ul.jcarousel-control li a:focus {background-position:0 -11px}

这会将当前控件项设置为“开启”

这在点击之前不起作用。

【讨论】：