1

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

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

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

4

1 回答 1

0

我想这就是你为制作“普通”轮播所做的事情。假设 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 个，一旦到达终点，附加第一个/最后一个组的副本，并删除第一个/最后一个组。

另一种选择是快速向相反方向滚动。无需捕捉到不会向用户提供视觉反馈的另一端，您可以更快地设置滚动到另一端的动画。在这种情况下，一旦用户到达末尾，滚动停止，如果他再次滚动，它会滚动回到开头，因此他不会对正在发生的事情感到惊讶。

那只是我的两分钱。我曾经做过一个轮播，但没有这个功能。我已经考虑过了，但没有实施。

希望能帮助到你。

于 2012-06-27T19:23:30.633 回答