在Javascript中创建无缝循环图像

Question

我的老板让我这么做的，我不知道怎么用Javascript来做。

我需要做的是在一个html页面上有3张图片，向上滚动页面。

所以当用户点击“下一步”时，这三张图片会滚动掉(消失在图片下面)，取而代之的是另外三张图片。当您直接单击这些图像时，它会更改文本框(在本例中标记为REPLACE ME)的内容。在这一点上，我甚至不确定要用谷歌搜索什么。我理解替换我的操作。但我不确定如何让一个图像滚动离开并被另一个图像取代(图像在按下next 5次后循环)。我认为Jquery会让它变得更容易，但大多数教程都不是我想要的。有没有人知道有这样的教程。

A asset http://www.loopmedia.com/images/newsletter/SlideUpAndSlideUpV2.png

Answer 1

我想你想要像this或this这样的东西

Answer 2

好的，如果你想要它背后的理论，这就是……sans代码：

你必须有一个div，它是容器。这就是你所需要的图像“视区”的宽度和高度。这需要是overflow: hidden; position: relative;。

在其中，您需要一个div，它与图像视口(如上所述)一样宽，但与所有内容一样高。因此，这是最高的5组图像在滚动中。这需要是position: absolute; top: 0; left: 0;。

在这个内部div中，您需要像往常一样放置包含图像的5个div，每个div都在彼此的顶部。

所以..。现在，当你点击‘下一步’，你需要animate() (jquery)内部div的top值为-HEIGHT_OF_1_SET_OF_IMAGES。这给人一种图片滚动离开页面的错觉。

完成此操作后(请参阅jquery的动画回调函数)，您需要使用appendTo()函数将现在隐藏在页面顶部(第一组图像)之外的div移到底部，将其附加到内部div的末尾。同时，您需要再次将top值设置为0。因此，您再次开始循环。

希望这是有意义的。:)任何问题都可以叫我一声。

Answer 3

我相信有插件可以做到这一点，你所需要的就是搜索。

如果你想自己做，我也会这么做。

使用精灵，第一个和最后一个图像是相同的(用于重叠)，然后简单地无限地动画精灵的top属性，直到它达到某个值(最后一个图像已经完成滚动)，当发生这种情况时，重置top值，然后再次执行。