如何创建无限滚动图库
Rag*_*dey 2 html javascript css infinite
我正在尝试找出一种方法，使同一行上的多个图像延伸超过 div 继续向左滚动，直到它超出视图，此时它将移动到图像库的末尾并继续再次滚动即使它在视野之外。
这是我到目前为止的代码。我在课堂上对图像进行游戏，因为我觉得这会有所帮助，但我还不确定如何。
html, body {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}
*, *::before, *::after {
box-sizing: border-box;
}
body {
background-color: black;
}
#permas {
height: 150px;
bottom: 0;
background: blue;
position: absolute;
overflow:hidden;
overflow-y: hidden;
white-space:nowrap;
}
#permas img {
height: 100%;
}<html>
<head>
<title>Test site
</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div id="permas">
<img class="scroller" src="https://i.imgur.com/wURYltS.jpg">
<img class="scroller" src="https://i.imgur.com/wURYltS.jpg">
<img class="scroller" src="https://i.imgur.com/wURYltS.jpg">
<img class="scroller" src="https://i.imgur.com/wURYltS.jpg">
<img class="scroller" src="https://i.imgur.com/wURYltS.jpg">
<img class="scroller" src="https://i.imgur.com/wURYltS.jpg">
<img class="scroller" src="https://i.imgur.com/wURYltS.jpg">
<img class="scroller" src="https://i.imgur.com/wURYltS.jpg">
<img class="scroller" src="https://i.imgur.com/wURYltS.jpg">
<img class="scroller" src="https://i.imgur.com/wURYltS.jpg">
</div>
<script src="main.js"></script>
</body>
</html>由于图像可以具有不同的长宽比，因此一次仅将一张图像移动到队列后面会非常混乱，并且需要 JavaScript 干预。
类似的方法是拥有两个图像副本，将 permas div 元素设置为向左移动其宽度的 50% 的动画，即让所有 10 个图像向左移开，并将视口填充为第二盘开始。
然后让 permas 回到最初的位置并重复。
评论中有人担心需要做太多工作。我测试了 10 个不同大小和不同内容的图像以及问题中给出的图像，发现在我的 Windows 10 笔记本电脑上，GPU 使用率相当稳定，约为 20%。当然，如果有更多图像（可能有些图像的自然尺寸非常大，尽管我没有测试过），可能需要更多的处理器时间。
我没看到有什么乱七八糟的。您必须确信这 10 张图像将不仅仅覆盖视口宽度 - 但问题中也做出了这一假设。
这是带有原始图像的片段：
html, body {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
overflow: scroll;
}
*, *::before, *::after {
box-sizing: border-box;
}
body {
background-color: black;
}
#permas {
height: 150px;
bottom: 0;
background: blue;
position: absolute;
overflow:hidden;
overflow-y: hidden;
white-space:nowrap;
/* added */
left: 0;
animation-name: scroll;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#permas img {
height: 100%;
}
@keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}<div id="permas">
<img class="scroller" src="https://i.imgur.com/wURYltS.jpg">
<img class="scroller" src="https://i.imgur.com/wURYltS.jpg">
<img class="scroller" src="https://i.imgur.com/wURYltS.jpg">
<img class="scroller" src="https://i.imgur.com/wURYltS.jpg">
<img class="scroller" src="https://i.imgur.com/wURYltS.jpg">
<img class="scroller" src="https://i.imgur.com/wURYltS.jpg">
<img class="scroller" src="https://i.imgur.com/wURYltS.jpg">
<img class="scroller" src="https://i.imgur.com/wURYltS.jpg">
<img class="scroller" src="https://i.imgur.com/wURYltS.jpg">
<img class="scroller" src="https://i.imgur.com/wURYltS.jpg">
<img class="scroller" src="https://i.imgur.com/wURYltS.jpg">
<img class="scroller" src="https://i.imgur.com/wURYltS.jpg">
<img class="scroller" src="https://i.imgur.com/wURYltS.jpg">
<img class="scroller" src="https://i.imgur.com/wURYltS.jpg">
<img class="scroller" src="https://i.imgur.com/wURYltS.jpg">
<img class="scroller" src="https://i.imgur.com/wURYltS.jpg">
<img class="scroller" src="https://i.imgur.com/wURYltS.jpg">
<img class="scroller" src="https://i.imgur.com/wURYltS.jpg">
<img class="scroller" src="https://i.imgur.com/wURYltS.jpg">
<img class="scroller" src="https://i.imgur.com/wURYltS.jpg">
</div>