如何创建无限滚动图片库
[英]How do I create an infinite scrolling image gallery
问题描述
我试图找出一种方法，让同一行上的多个图像延伸超过 div 继续向左滚动，直到它不在视野范围内，此时它将移动到图像库的末尾并继续再次滚动即使它在视野之外。
这是我到目前为止的代码。 我将图像游戏为 class 因为我觉得这会有所帮助，但我不确定如何。
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>
2 个解决方案
解决方案1
1 已采纳 2021-01-27 16:35:18
由于图像可以具有不同的纵横比，因此一次仅将一张图像移动到队列的后面非常麻烦，并且需要 JavaScript 干预。
一个类似的方法是正好有两个图像副本，以动画 permas div 元素向左移动其宽度的 50%，即将所有 10 个图像移到左侧，并将视口填充为第二组的开始。
然后将 permas 恢复到最初的位置并重复。
评论中表达了一些担忧，即需要做太多工作。 我测试了 10 张不同尺寸和不同内容的图像以及问题中给出的图像，并发现在我相当强大的笔记本电脑上 GPU 的使用率与 Windows 10 相当一致，约为 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>
解决方案2
0 2022-07-23 00:01:58
海沃氏发布了一个很棒的例子。 但是，我想添加一件令人沮丧的事情，那就是溢出的设置。 图像溢出将出现在屏幕外，并允许用户滚动到他们的 position，这非常尴尬并且通常是不受欢迎的行为，为了保持页面与添加滚动库之前的最大宽度相同，我需要放置max-width: 100%; overflow-x: hidden; max-width: 100%; overflow-x: hidden; 进入正文，我的 css 文件的 html 部分。 谢谢你这个很棒的例子！
如何创建在mouseOver上滚动的内容区域（图像库）
[英]How do I create a content area (image gallery) that scrolls on mouseOver
我如何在 wordpress 上安装水平滚动 UI（用于图片库）（没有编码技能）
[英]how do i install horizontal scrolling UI (for an image gallery) on wordpress (with no coding skills)
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.