jQuery

Question

我试图用 Cloud9 Carousel 实现 goTo(itemIndex) 功能。你看，Cloud9 carousel 有一个内置函数 go(x) 可以将 carousel 移动 x 次你定义的。但我想要实现的是 GO 到轮播中的特定项目，而不是 x 时间幻灯片更改。例如，如果您将 3 放入 go function 中，轮播将滚动 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 link 是：https://github.com/specious/cloud9carousel

Answer 1

您可以使用下面这个功能：

其中 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 );

  }

}

希望对您有所帮助

Answer 2

注意到大众需求，我 added goTo(index) 在 2.1.0.

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

jQuery - Cloud9 轮播 - 转到功能

jQuery - Cloud9 Carousel - goTo function

javascript

slider

carousel