0
284
Vistas¿Cómo hago un bucle de imágenes en un div hacia abajo infinitamente usando javascript?
Estoy trabajando en una tarea con la descripción de:
Cree un bucle de JavaScript usando imágenes para obtener el resultado como se muestra en la imagen a continuación. Puede usar cualquier imagen y requiere usar un máximo de 5 imágenes. Las imágenes deben estar en bucle infinitamente. Usa tu propia creatividad para diseñar el diseño.
Pero no tengo idea de cómo trabajar en eso, solo creé un div con tres imágenes y me quedé en la parte de javascript.
Este es mi código:
.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>
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Aquí hay algo para empezar. Cambié <div class="container"> a <div id="container"> y agregué otro contenedor dentro de ese: .box-container .
La idea básica es clonar un contenedor con las imágenes iniciales y luego agregarlas (agregarlas) a su contenedor original.
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>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta