Question

我写了这个无限滚动的旋转木马，我想知道非无限滚动的最佳方法是什么。

现在，用户指定他们想要在视图中出现的项目数量（在numSlide中）。基本上，用户点击右箭头，它使用调用prevLoop或nextLoop的.animate（）方法。其中任何一个基本上只是拉取指定元素的数量，并相应地将它们移动到<ul></ul>的开头或结尾。

我已经走到了这一步，但现在我正在尝试引入关闭无限滚动的选项（例如，只显示列表中的项目，一旦到达每一侧的末尾，它就会阻止调用prevLoop / nextLoop。

我的想法基本上是，设置一个名为无限的变量。在任一点击功能（rightClick()和leftClick()）中，检查无限是否为真。如果是，请使用普通滚动代码。否则，我正在考虑：获取<ul>中numElements内的元素数量，设置一个计数变量以在每次点击时增加，并检查计数是否相同或更少的numElements。如果它是> numElements，那么我会阻止任何一个函数动画更多。我觉得这会很快变得混乱/忙碌。

它的设置如下：

    var count = numElements;
    function rightClick() {
    var cfirst = container.find('li').first(), //the current first element
        tomove = cfirst.nextLoop(numSlide - 1, true), //the elements that need to move
        nfirst = tomove.last().nextLoop(1, false); //the new first element

    /*
       Pretend we currently have [A, B, C, D, E, F, G, H, I] and numSlide is 3
       cfirst === [A]
       tomove === [A, B, C]
       nfirst === [D]
    */

    var indent = cfirst.offset().left - nfirst.offset().left;

    if (infinite) {
    ul.not(':animated').animate({ // not:animated makes sure we only get one @ a time
        'left': indent
    }, 'fast', function() {
        tomove.appendTo(ul); //Move them to the end of the UL
        ul.css({ // left indent of ul
            'left': 0
        });
    });
} else {
     // Infinite is turned off, handle it in here
    count = count -1;
    // Animate numElements - numSlide
}
}

有没有其他想法？这是一个工作演示：

http://jsfiddle.net/someprimetime/AYfhn/

Answer 1

处理此问题的一种方法是保留对“最后一个”<li>的引用（就像移动任何<li>之前一样）并使用.index()查找其当前内容<ul>中的位置，如下所示：

var lastIndex = last.index();

if (infinite || (lastIndex + 1 >= rowSize + numSlide)) {
    // animate
} else if (lastIndex >= rowSize) {
    // animate using smaller numSlide
} else {
    // don't animate
}

另一件事：

您应该考虑将代码转换为jQuery plugin。他们写起来很容易。你不需要分发它或任何东西;它只是为了让它更容易让它更容易工作。特别是，您可以从options and defaults中受益，并且您可以使用data method保持状态（例如“最后”<li>）。

制作旋转木马不是无限滚动

1 个答案: