Question

我尝试使用 Cloud9 Carousel 来实现goTo(itemIndex)功能。你看，Cloud9轮播有一个内置函数go(x)，它可以移动您定义的轮播x次。但我想要实现的是 GO 到轮播中的特定项目，而不是x时间幻灯片更改。例如，如果您在go function中放入3，则轮播将滚动3次。我需要一些东西去特定的项目，如下面的降价：

<li id="item1">Example 1</li>
<li id="item2">Example 3</li>
<li id="item3">Example 2</li>

我需要像goTo(".item2")或goTo(itemIndex)这样的东西。我们可以通过从当前正在显示的那个中选择最近邻居来实现项目索引。参见：

$("#carousel").data("carousel").nearestIndex();

将提供与此时显示的项目相对应的integer，因此我们可以通过给出正面和负面参数来计算其他指数。

如果有人考虑给我一些启示，那么Cloud9 Carousel项目的github链接是：https://github.com/specious/cloud9carousel

Answer 1

注意到热门需求，我在2.1.0中added goTo(index)。

现在的用法是：$("#carousel").data("carousel").goTo(3);

Answer 2

您可以使用以下功能：

其中hits是轮播项目数组

function goto(item){
  if( hits.length !== 0 ) {
        var idx = hits.index(item);
        var count = hits.length;
        var diff = idx - ($("#mycarousel").data("carousel").floatIndex() % count);
        if( 2 * Math.abs(diff) > count )
        diff += (diff > 0) ? -count : count;
       $("#mycarousel").data("carousel").destRotation = $("#mycarousel").data("carousel").rotation;
        $("#mycarousel").data("carousel").go( -diff );

  }

}

希望它会有所帮助

jQuery - Cloud9 Carousel - goTo函数

2 个答案: