Javascript 如何创建无限滚动图像库

我正在试图找到一种方法，让多个图像在同一条线上延伸到div之后继续向左滚动，直到看不见为止，此时它将移动到图像库的末尾，并继续滚动，即使它在视图之外

这是我到目前为止的代码。我在课堂上玩这些图片，因为我觉得这会有帮助，但我还不确定如何做

html，正文{
显示器：flex；
弯曲方向：立柱；
宽度：100%；
身高：100%；
边际：0px；
填充：0px；
溢出：隐藏；
}
*，*：：之前，*：：之后{
框大小：边框框；
}
身体{
背景色：黑色；
}
#烫发{
高度：150像素；
底部：0；
背景：蓝色；
位置：绝对位置；
溢出：隐藏；
溢出y：隐藏；
空白：nowrap；
}
#permasimg{
身高：100%；
}

试验场地

由于图像可能具有不同的纵横比，一次只将一个图像移动到队列的后面会非常混乱，需要JavaScript干预

一种类似的方法是，恰好有两个图像副本，对permas div元素设置动画，使其向左移动其宽度的50%，即将所有10个图像移到左侧，并在第二组图像开始时填充视口

然后让烫发回到最初的位置并重复

评论中有人担心需要做太多的工作。我已经测试了10张不同大小、不同内容的图像以及问题中给出的图像，发现我的功能相当强大的笔记本电脑上的GPU使用率与Windows 10相当一致，约为20%。当然，对于更多的图像（如果有些图像的自然尺寸非常大，尽管我还没有测试过），可能需要更多的处理器时间

我没有看到任何抽搐。您必须确信这10幅图像将覆盖更多的视口宽度，但问题中也提出了这一假设

以下是原始图像的片段：

html，正文{
显示器：flex；
弯曲方向：立柱；
宽度：100%；
身高：100%；
边际：0px；
填充：0px；
溢出：隐藏；
溢出：滚动；
}
*，*：：之前，*：：之后{
框大小：边框框；
}
身体{
背景色：黑色；
}
#烫发{
高度：150像素；
底部：0；
背景：蓝色；
位置：绝对位置；
溢出：隐藏；
溢出y：隐藏；
空白：nowrap；
/*增加*/
左：0；
动画名称：滚动；
动画持续时间：10秒；
动画迭代次数：无限；
动画计时功能：线性；
}
#permasimg{
身高：100%；
}
@关键帧滚动{
0% {
变换：translateX（0）；
}
100% {
转化：translateX（-50%）；
}
}

related：我觉得您需要使用一些基本滚动之外的替代方法来实现这一点。我的想法是，如果将一个框设置为“溢出：滚动”，当里面的东西移动时，它会非常紧张。相反，我认为你将不得不在每一面使用一些滚动按钮，并对其中的方框进行索引。如果某个框在视图之外足够远，请使用JavaScript将其移动到列表的末尾。。。再次强调，这不是超乎想象的，只是我的直觉。@Temaniaf如果我同意相貌相关，并且我已经阅读了那篇文章中的信息，那么我会尝试从右到左的连续运动，同时显示多个图像。这似乎是集中在一个图像显示冻结几秒钟，然后再移动到下一个。@CalvinBonner我完全同意。理论上，我有一个想法，我可以有一个集合div，它可以给左边视图外的图像的宽度加上一些javascript，这样一旦它完全离开视图，它就可以将它附加到div的末尾，并再次设置动画，以设定的速度向左移动。参见这个例子-