如何使用 javascript 无限循环 div 中的图像？

Question

I am working on an assignment with the description of:

Create a JavaScript loop using images to get the output as picture below. You can use any images and it is requiring to use maximum 5 images. The images should be loop infinitely. Use your own creativity to design the layout.

But I have no idea how to work on that, I only created a div with three images in it and stuck on the javascript part.

This is my code:

 .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>

This is what I've got now:

Answer 1

Here is something to get you started. I changed <div class="container"> to <div id="container"> and added another container within that one: .box-container .

The basic idea is to clone a container with the initial images, and then append (add) them to your original container.

 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>