【发布时间】：2021-04-30 16:02:28
【问题描述】：
我正在尝试找出一种方法，让同一行上的多个图像延伸超过 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>【问题讨论】：
-
我觉得您需要为此使用一些替代基本滚动的方法。我的想法是，如果你有一个设置为
overflow: scroll的盒子，当里面的东西在里面移动时，它会非常紧张。相反，我认为您将不得不在每一侧使用一些滚动按钮以及哪个框居中的索引。如果一个框在视图之外足够远，请使用 JavaScript 将其移动到列表的末尾……再说一次，不是经过深思熟虑，只是我的直觉…… -
@TemaniAfif 我同意这看起来相关，并且我已经查看了该帖子中的信息，但是我试图让从右到左的连续流动运动一次显示多个图像。这似乎专注于让单个图像显示冻结几秒钟，然后再移动到下一个。
-
@CalvinBonner 我完全同意。从理论上讲，我有一个想法，我可以有一个设置 div，将视图之外的图像宽度提供给左侧，并使用一些 javascript 来实现，因此一旦它完全超出视图，它就可以将其附加到视图的末尾div 并再次为其设置动画以向左移动。
标签： javascript html css infinite