tengo un problema con mi carrusel en JS Simplemente no reconoce mi HTML interno, de hecho, cuando miro al inspector, no reconoce mi HTML interno, investigué un poco y no encontré nada (demostración
<img src = unknown/>.Mi matriz img es una matriz de URL que no está en ninguna carpeta.
Esto es lo que ya tengo
function slideShow() { var counter = 0; slideShow(); const diapoImages = [ "https://images.unsplash.com/photo-1652044049927-7142ea82c81d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80", "https://images.unsplash.com/photo-1639718561716-b59d3995d886?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80", "https://images.unsplash.com/photo-1653593349937-1a2a29a614d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80", "https://images.unsplash.com/photo-1653629154297-d01874fe01c7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80", "https://images.unsplash.com/photo-1653537649117-821e01f707c2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80", ]; var imgDiv = document.getElementById("header"); if (counter < diapoImages.length) { var img = diapoImages[counter]; imgDiv.innerHTML = `<img src=${img}/>`; counter += 1; } else { counter = 0; } setTimeout(slideShow, 5000) }aquí está el HTML
<!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"> <script src="https://kit.fontawesome.com/c9b7852654.js" crossorigin="anonymous"></script> <link rel="stylesheet" href="css/style.css"> <title>Diaporama</title> </head> <body> <i id = "nav-gauche" class="fa-solid fa-arrow-left-long"></i> <i id = "nav-droite" class="fa-solid fa-arrow-right-long"></i> <div class="container"> <h1>Javascript Caroussel</h1> <h2>Test d'un caroussel en JS</h2> <div id="header"> </div> </div> <script src=""></script> </body> </html>Debe crear la etiqueta de imagen usando document.createElement("img"). Luego, debe establecer el src de la etiqueta de imagen. Al final de la función, debe agregar la etiqueta de la imagen en la etiqueta div.
function slideShow() { var counter = 0; slideShow(); const diapoImages = [ "https://images.unsplash.com/photo-1652044049927-7142ea82c81d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80", "https://images.unsplash.com/photo-1639718561716-b59d3995d886?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80", "https://images.unsplash.com/photo-1653593349937-1a2a29a614d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80", "https://images.unsplash.com/photo-1653629154297-d01874fe01c7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80", "https://images.unsplash.com/photo-1653537649117-821e01f707c2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80", ]; var imgDiv = document.getElementById("header"); var image = document.createElement("img") for (var ind in diapoImages) while ( ind < (diapoImages.length + 1)){ if (counter < diapoImages.length) { var img = diapoImages[counter]; imgDiv.appendChild(image) counter += 1; image.src = img } else { counter = 0; } } } setTimeout(slideShow, 5000)No sé sobre el error de HTML interno, pero pude ver dos puntos importantes que tal vez te ayuden.
slideShow(); ) provoca llamadas recursivas.counter = 0; ) restablecerá el valor. Entonces, la segunda imagen nunca se renderizará. function slideShow(counter = 0) { const diapoImages = [ "https://images.unsplash.com/photo-1652044049927-7142ea82c81d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80", "https://images.unsplash.com/photo-1639718561716-b59d3995d886?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80", "https://images.unsplash.com/photo-1653593349937-1a2a29a614d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80", "https://images.unsplash.com/photo-1653629154297-d01874fe01c7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80", "https://images.unsplash.com/photo-1653537649117-821e01f707c2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80", ]; var imgDiv = document.getElementById("header"); if (counter < diapoImages.length) { var img = diapoImages[counter]; imgDiv.innerHTML = `<img src=${img}/>`; counter += 1; } else { counter = 0; } setTimeout(() => slideShow(counter), 5000) } slideShow(); <div id="header"></div>