如何創建無限滾動圖片庫
[英]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.