0
148
VistasError indefinido después de cambiar de imagen en Javascript
Estoy tratando de crear un sitio web con una imagen en el medio que cambia después de un tiempo determinado. Sin embargo, después de ejecutar el ciclo una vez, no se muestra ninguna imagen por un momento y mi consola muestra:
Poco después, vuelve a cambiar de imagen. Pero hacer que la imagen desaparezca por un corto tiempo es imposible.
Mi Javascript se ve así:
var allPictures = new Array(); var index = 0; allPictures[0] = "imgA.jpg"; allPictures[1] = "imgB.jpg"; allPictures[2] = "imgC.jpg"; addEventListener("load",() => { setInterval( function() { changeImage() }, 500); }); function changeImage() { document.getElementById("galleryPicture").src = allPictures[index]; if (index < allPictures.length) { index += 1; } else if (index >= allPictures.length) { index = 0; } }Mi HTML se ve así:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="main.css"> <title>Website</title> </head> <body> <script src="pictureSwapScript.js"></script> <div class="galleryPicture"> <img id= "galleryPicture" src="imgA.jpg"> </div> </body> </html>2 Respuestas
Responde la pregunta0
El problema es la condición utilizada para incrementar el index , saldrá de los límites de la matriz.
reemplazarlo con
if (index >= allPictures.length - 1) { index = 0; } else { index += 1; }Hay otras mejoras mínimas que pueden beneficiar su código, entre las cuales la más obvia para mí es reemplazar:
setInterval( function() { changeImage() }, 500);con tan solo
setInterval(changeImage, 500);0
El siguiente código resuelve su caso de uso.
function changeImage() { if (index < allPictures.length - 1) { index += 1; } else if (index >= allPictures.length - 1) { index = 0; } document.getElementById("galleryPicture").src = allPictures[index]; }Estaba tratando de comparar el valor del índice con la longitud, el índice siempre comienza desde 0. Por lo tanto, tendrá que disminuir la longitud en 1 porque la longitud comienza desde 1