Estoy tratando de hacer una presentación de diapositivas simple cambiando las imágenes en un elemento DOM. Aquí está el HTML y el JavaScript... Las fotos NO aparecen ¿Qué me estoy perdiendo?
aquí está el HTML
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Slide Show</title> <link rel="stylesheet" href="css/form.css"> </head> <body> <img id="pictures" style = "width:50%"> <div> <button type="button" id="reverse">Reverse</button> <button type="button" id="forward">Forward</button> </div> <script src="js/slideshow.js"></script> </body> </html> Here is the JavaScript Part function slideshow(){ 'use strict'; let i = 0; // array to hold the pictures let pics = []; pics [0] = cave.jpg; pics [1] = creek.jpg; pics [2] = entrance.jpg; pics [3] = tree.jpg; // making the pictures the dom element document.getElementById('pictures').value = pics[i]; // make the buttons rotate through the pics document.getElementById('forward').onclick = i++; document.getElementById('reverse').onclick = i--; } window.onload = init;Cualquier puntero sería más appriciated.
Faltan pocas cosas en su solución, así que siéntase libre de ejecutar e inspeccionar el código a continuación. Además, pon las imágenes en HTML al principio. La ejecución del código JS se asegura de que estén cambiando el orden. Solo el del medio pasa a través de la ventana ( #pictures-container ); este código funciona solo para un número impar de imágenes.
Aquí está el código que funcionará:
HTML (índice.html)
<html> <head> <meta charset="utf-8"> <title>Slide Show</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="pictures-container"> <div id="pictures"> <img class="picture" alt="pic 1" data-id="1"> <img class="picture" alt="pic 2" data-id="2"> <img class="picture" alt="pic 3" data-id="3"> </div> </div> <div id="slideshow-actions"> <button type="button" id="reverse">Reverse</button> <button type="button" id="forward">Forward</button> </div> <script src="js/slideshow.js"></script> </body> </html>CSS (css/estilo.css)
body { display: flex; justify-content: center; align-items: center; flex-direction: column; padding: 20px; } #pictures-container { width: 110px; height: 90px; border: 1px solid red; border-radius: 15px; position: relative; overflow: hidden; } #pictures { display: flex; gap: 5px; z-index: -1; position: absolute; left: 50%; transform: translateX(-50%); } .picture { width: 100px; height: 80px; display: block; padding: 5px; background-color: #dedede; } .picture[data-id="1"] { background-color: yellow; } .picture[data-id="2"] { background-color: magenta; } #slideshow-actions { margin-top: 15px; }JS (js/script.js)
function registerEvents() { let btnReverse = document.getElementById('reverse'); let btnForward = document.getElementById('forward'); btnReverse.onclick = () => { let pictures = document.querySelectorAll('.picture'); let firstPic = pictures[0]; let parent = firstPic.parentElement; parent.removeChild(firstPic); parent.append(firstPic); } btnForward.onclick = () => { let pictures = document.querySelectorAll('.picture'); let lastPic = pictures[pictures.length - 1]; let parent = lastPic.parentElement; parent.removeChild(lastPic); parent.prepend(lastPic); } } registerEvents();