Quiero crear una presentación de diapositivas cronometrada usando mi código existente y agregando javascript para cambiar la imagen. Quiero tres fotos para alternar cada 3 segundos. Solo quiero que cambie la foto, no el encabezado del texto. He adjuntado mi código HTML y CSS.`
#headercontainer{ width: 100vw; height:90vh; background-color: #A64253; } .head{ width: 100%; height: 100%; object-fit: cover; } .headertxt{ position: absolute; top: 40%; margin: auto; width: 100%; font-size: 8.5vw; text-align: center; color: #17255A; } #arrow{ font-size: 6vw; } <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl.it</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="headercontainer"> <img class="head" src="https://th.bing.com/th/id/R.10d3bd1edd810efb3ae8e0974e394445?rik=fIvZv9wkgyrIeQ&pid=ImgRaw&r=0" alt=""> <h1 class="headertxt"> TEXT<br> <p id="arrow"> ↓</p></h1> </div> </body> </html>`
setInterval() y setTimeout() son herramientas útiles al hacer temporizadores. En su caso, desea que la secuencia continúe, por lo que setInterval() es la mejor opción.
Para hacer una secuencia con setInterval() , puedes hacer algo como esto:
setInterval(function(){ console.log("Hello"); }, 3000);Si abre su consola, verá que aparece "Hola" cada pocos segundos.
Entonces, para usar esta característica increíble en su código, puede usar esta muestra:
setInterval(function(){ let images = ["path/to/first/image", "path/to/second/image", "path/to/third/image"]; let imageNumber = 0; let image = images[imageNumber]; document.querySelector(".head").src = image; imageNumber++; if (imageNumber >= 3) { imageNumber = 0; } }, 3000);Espero que pueda ayudarte.
body { margin: 0; } #headercontainer { width: 100vw; height: 90vh; background-color: #A64253; position: relative; } .head { width: 100%; height: 100%; object-fit: cover; } .headertxt { position: absolute; top: 40%; margin: auto; width: 100%; font-size: 8.5vw; text-align: center; color: #17255A; z-index: 1; } #arrow { font-size: 6vw; } .head1 { position: relative; animation: head1 9s linear infinite; } .head2 { position: absolute; top: 0; left: 0; right: 0; bottom: 0; animation: head2 9s linear infinite; } .head3 { position: absolute; top: 0; left: 0; right: 0; bottom: 0; animation: head3 9s linear infinite; } @keyframes head1 { 0% { opacity: 1; } 22.222222% { opacity: 1; } 33.333333% { opacity: 0; } 88.888888% { opacity: 0; } 100% { opacity: 1; } } @keyframes head2 { 0% { opacity: 0; } 22.222222% { opacity: 0; } 33.333333% { opacity: 1; } 55.555555% { opacity: 1; } 66.666666% { opacity: 0; } 100% { opacity: 0; } } @keyframes head3 { 0% { opacity: 0; } 55.555555% { opacity: 0; } 66.666666% { opacity: 1; } 88.888888% { opacity: 1; } 100% { opacity: 0; } } <div id="headercontainer"> <img class="head head1" src="https://www.w3schools.com/css/img_5terre.jpg" alt=""> <img class="head head2" src="https://www.w3schools.com/css/img_forest.jpg" alt=""> <img class="head head3" src="https://www.w3schools.com/css/img_lights.jpg" alt=""> <h1 class="headertxt"> TEXT<br> <p id="arrow"> ↓</p> </h1> </div>Simplemente puede ejecutar una función setInterval con una matriz de imágenes. Simplemente inyecte este código JS en su código para obtener su resultado.
const headerImg = document.querySelector('.head') const UPDATE_TIME_INTERVAL = 3000 // Enter URLs of your own custom images const imagesArray = [ "https://unsplash.it/500", "https://unsplash.it/501", "https://unsplash.it/502", ] let i = 0 setInterval(()=>{ if(i == 2){ i = 0 } else {i = i + 1}; console.log('i was run',i) headerImg.src = imagesArray[i] },UPDATE_TIME_INTERVAL)