使用jQuery为无限旋转木马连续追加和翻转元素

Question

好的，所以我有一个左右动画的旋转木马。

有一个视口div，比如...... 1000px宽，里面有一系列div，总共可以说是5000px。它们都是左侧浮动，所以在任何时候，我只看到视口div中的4个项目。什么是使其无限的最佳方法。如何检测到用户已到达我的轮播中的最后一个div（向左或向右）。你会删除所有元素并反转订单并将它们附加到同一个div吗？还是其他一些方法？我正在使用jQuery ......

这只是目前的概念（无限部分），所以代码实际上不可能发布。我只是在寻找潜在的解决方案......

Answer 1

我想这就是你做“正常”旋转木马的方法。 假设HTML是这样的：

<div class="viewport">
    <div class="container">
        <div class="group"> <!-- Without this div probably --!>
            <div class="item"></div>
            <div class="item"></div>
        </div>
    </div>
</div>

要使其成为“轮播”，您将使视口的宽度固定，并且容器展开以包含其所有子项（使用overflow: hidden）。向右滚动时，减小其左偏移量，向左滚动时，增加其左偏移量。如果左偏移> = 0，则您在第一个项目。如果左偏移量<= - （容器宽度），则表示您在最后一个项目。

每次向左/向右滚动时都应检查这些条件，因此，您将在“组”之前/之后追加容器的副本，一旦旧组不可见，您可以将其删除。这使得滚动平滑，并且位置不会从末尾捕捉到开头。但是，如果有很多项目，这可能会很慢。因此，最初，您可以将项目划分为多个“组”，例如5，一旦结束，请附加第一个/最后一个组的副本，然后删除第一个/最后一个组。

另一种选择是快速向相反方向滚动。您可以将滚动动画更快地移动到另一端，而不是捕捉到不向用户提供视觉反馈的另一端。在这种情况下，一旦用户结束，滚动停止，如果他再次滚动，它会滚动回到开头，这样他就不会对发生的事情感到惊讶。

那只是我的两分钱。我曾经做过旋转木马，但没有这个功能。我考虑过它，但没有实现它。

希望它有所帮助。