[英]How do I loop images in a div downwards infinitely using javascript?
我正在處理一項描述如下的任務:
使用圖像創建 JavaScript 循環以獲得 output,如下圖所示。 您可以使用任何圖像,並且最多需要使用 5 張圖像。 圖像應該無限循環。 使用您自己的創造力來設計布局。
但我不知道如何處理,我只創建了一個包含三個圖像的 div 並停留在 javascript 部分。
這是我的代碼:
.container { width: 100%; height: 27vh; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }.box { width: 200px; height: 200px; margin: 1px; } img { width: 200px; height: 200px; }
<div class="container"> <div class="box"> <img class="car" src="images/car1.jpg"> </div> <div class="box"> <img class="car" src="images/car2.jpg"> </div> <div class="box"> <img class="car" src="images/car3.jpg"> </div> </div>
這里有一些東西可以幫助您入門。 我將<div class="container">
更改為<div id="container">
並在其中添加了另一個容器: .box-container
。
基本思想是使用初始圖像克隆一個容器,然后將 append(添加)它們到您的原始容器中。
let numberOfRows = 3; const containerDiv = document.getElementById('container'); // get first element in #container, which is just one child: .box-container let boxContainerDiv = containerDiv.children[0]; while (numberOfRows) { numberOfRows--; // clone the node let clonedChild = boxContainerDiv.cloneNode(true); // add the clone node to #container containerDiv.appendChild(clonedChild); }
.box-container { width: 100%; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }.box { width: 200px; height: 200px; margin: 1px; } img { width: 200px; height: 200px; border: 1px solid; }
<div id="container"> <div class="box-container"> <div class="box"> <img class="car" src="https://via.placeholder.com/200.png?text=1"> </div> <div class="box"> <img class="car" src="https://via.placeholder.com/200.png?text=2"> </div> <div class="box"> <img class="car" src="https://via.placeholder.com/200.png?text=3"> </div> </div> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.