Soy un novato en la codificación y esto es para un proyecto escolar. Estoy tratando de cambiar una imagen cada 15 segundos y he descubierto cómo hacerlo. sin embargo, quiero que se muestre una imagen inmediatamente y no después de 15 segundos. mi código está abajo:
<!DOCTYPE html> <html> <body> <div class="center"> <img src="" id="image"> </div> <script type="text/javascript"> let image = document.getElementById('image'); let images = ['image1.png', 'image2.png', 'image3.png', 'image4.png', 'image5.png', 'image6.png', 'image7.png', 'image8.png', 'image9.png', 'image10.png', 'image11.png', 'image12.png', 'image13.png', 'image14.png', 'image15.png', 'image16.png', 'image17.png', 'image18.png', 'image19.png', 'image20.png', 'image21.png', 'image22.png', 'image23.png', 'image24.png', 'image25.png', 'image26.png', 'image27.png', 'image28.png', 'image29.png', 'image30.png', 'image31.png', 'image32.png', 'image33.png', 'image34.png', 'image35.png', 'image36.png', 'image37.png', 'image38.png', 'image39.png', 'image40.png', 'image41.png', 'image42.png', 'image43.png', 'image44.png', 'image45.png', 'image46.png', 'image47.png', 'image48.png', 'image49.png', 'image50.png', 'image51.png', 'image52.png', 'image53.png', 'image54.png', 'image55.png', 'image56.png', 'image57.png', 'image58.png', 'image59.png', 'image60.png', 'image61.png', 'image62.png', 'image63.png', 'image64.png', 'image65.png', 'image66.png', 'image67.png', 'image68.png', 'image69.png', 'image70.png', 'image71.png', 'image72.png', 'image73.png', 'image74.png', 'image75.png', 'image76.png', 'image77.png', 'image78.png', 'image79.png', 'image80.png', 'image81.png', 'image82.png', 'image83.png', 'image84.png', 'image85.png', 'image86.png', 'image87.png', 'image88.png', 'image89.png', 'image90.png', 'image91.png', 'image92.png', 'image93.png', 'image94.png', 'image95.png', 'image96.png', 'image97.png', 'image98.png', 'image99.png', 'image100.png'] setInterval(function(){ let random = Math.floor(Math.random() * 100); image.src = images[random]; }, 15000); </script> </body> </html> Sé que puedo cambiar la imagen manipulando el atributo src de la etiqueta img , pero quiero que se muestre una imagen aleatoria al cargar. He estado tratando de encontrar una solución, pero no pude encontrar ninguna. ¿Alguien puede ayudarme con cómo hacer esto?
Solo tiene que agregar esas dos instrucciones después de la creación de la lista de imágenes y antes de setInterval.
let random = Math.floor(Math.random() * 100); image.src = images[random];Ese es el código que obtendrás:
<!DOCTYPE html> <html> <body> <div class="center"> <img src="" id="image"> </div> <script type="text/javascript"> let image = document.getElementById('image'); let images = ['image1.png', 'image2.png', 'image3.png', 'image4.png', 'image5.png', 'image6.png', 'image7.png', 'image8.png', 'image9.png', 'image10.png', 'image11.png', 'image12.png', 'image13.png', 'image14.png', 'image15.png', 'image16.png', 'image17.png', 'image18.png', 'image19.png', 'image20.png', 'image21.png', 'image22.png', 'image23.png', 'image24.png', 'image25.png', 'image26.png', 'image27.png', 'image28.png', 'image29.png', 'image30.png', 'image31.png', 'image32.png', 'image33.png', 'image34.png', 'image35.png', 'image36.png', 'image37.png', 'image38.png', 'image39.png', 'image40.png', 'image41.png', 'image42.png', 'image43.png', 'image44.png', 'image45.png', 'image46.png', 'image47.png', 'image48.png', 'image49.png', 'image50.png', 'image51.png', 'image52.png', 'image53.png', 'image54.png', 'image55.png', 'image56.png', 'image57.png', 'image58.png', 'image59.png', 'image60.png', 'image61.png', 'image62.png', 'image63.png', 'image64.png', 'image65.png', 'image66.png', 'image67.png', 'image68.png', 'image69.png', 'image70.png', 'image71.png', 'image72.png', 'image73.png', 'image74.png', 'image75.png', 'image76.png', 'image77.png', 'image78.png', 'image79.png', 'image80.png', 'image81.png', 'image82.png', 'image83.png', 'image84.png', 'image85.png', 'image86.png', 'image87.png', 'image88.png', 'image89.png', 'image90.png', 'image91.png', 'image92.png', 'image93.png', 'image94.png', 'image95.png', 'image96.png', 'image97.png', 'image98.png', 'image99.png', 'image100.png'] let random = Math.floor(Math.random() * 100); image.src = images[random]; setInterval(function(){ let random = Math.floor(Math.random() * 100); image.src = images[random]; }, 15000); </script> </body> </html>Puede simplemente nombrar su función y llamarla una vez, antes de configurar el Intervalo.
let image = document.getElementById('image'); let images = ['image1.png', 'image2.png', 'image3.png', 'image4.png', 'image5.png', 'image6.png', 'image7.png', 'image8.png', 'image9.png', 'image10.png', 'image11.png', 'image12.png', 'image13.png', 'image14.png', 'image15.png', 'image16.png', 'image17.png', 'image18.png', 'image19.png', 'image20.png', 'image21.png', 'image22.png', 'image23.png', 'image24.png', 'image25.png', 'image26.png', 'image27.png', 'image28.png', 'image29.png', 'image30.png', 'image31.png', 'image32.png', 'image33.png', 'image34.png', 'image35.png', 'image36.png', 'image37.png', 'image38.png', 'image39.png', 'image40.png', 'image41.png', 'image42.png', 'image43.png', 'image44.png', 'image45.png', 'image46.png', 'image47.png', 'image48.png', 'image49.png', 'image50.png', 'image51.png', 'image52.png', 'image53.png', 'image54.png', 'image55.png', 'image56.png', 'image57.png', 'image58.png', 'image59.png', 'image60.png', 'image61.png', 'image62.png', 'image63.png', 'image64.png', 'image65.png', 'image66.png', 'image67.png', 'image68.png', 'image69.png', 'image70.png', 'image71.png', 'image72.png', 'image73.png', 'image74.png', 'image75.png', 'image76.png', 'image77.png', 'image78.png', 'image79.png', 'image80.png', 'image81.png', 'image82.png', 'image83.png', 'image84.png', 'image85.png', 'image86.png', 'image87.png', 'image88.png', 'image89.png', 'image90.png', 'image91.png', 'image92.png', 'image93.png', 'image94.png', 'image95.png', 'image96.png', 'image97.png', 'image98.png', 'image99.png', 'image100.png'] randomImage(); setInterval(randomImage, 15000); function randomImage(){ let random = Math.floor(Math.random() * images.length); image.src = images[random]; } <!DOCTYPE html> <html> <body> <div class="center"> <img src="" id="image"> </div> </body> </html>Aquí hay un fragmento de trabajo con diferentes imágenes.
let images = [] for(var i = 0; i<= 100; i++){ images.push("https://picsum.photos/300/200?random="+i); } let image = document.getElementById('image'); randomImage(); setInterval(randomImage, 2000); //I have reduced the interval duration function randomImage(){ let random = Math.floor(Math.random() * images.length); image.src = images[random]; } <!DOCTYPE html> <html> <body> <div class="center"> <img src="" id="image"> </div> </body> </html>Puede acortar un poco su código usando setTimeout en lugar de setInterval . En la función, primero muestra la imagen y luego usa setTimeout para volver a llamar a la función después de un retraso.
En este ejemplo de trabajo, como no tengo acceso a sus imágenes, estoy completando la matriz de imágenes con imágenes de dummyimage.com y configurando el retraso del tiempo de espera en un segundo para que pueda ver rápidamente los resultados.
const image = document.getElementById('image'); const images = []; // Return a random hex color function rndColor() { return Math.floor(Math.random()*16777215).toString(16); } // Get two hex colours and use them // to form a new dummy image, and then // push that image to the images array for (let i = 0; i < 100; i++) { const hex1 = rndColor(); const hex2 = rndColor(); images.push(`https://dummyimage.com/100x100/${hex1}/${hex2}`); } // The main carousel function // Add an image to the image src, and then // call the carousel function after a delay function carousel() { const random = Math.floor(Math.random() * 100); image.src = images[random]; setTimeout(carousel, 1000); } carousel(); <div class="center"> <img src="" id="image"> </div>