Tengo una imagen que se muestra en mi página de inicio y quiero que el usuario haga clic en el botón de imagen siguiente para que se muestre la siguiente imagen en la matriz. He visto preguntas similares y he intentado resolver el problema, pero nada parece funcionar. Creo que el código es correcto. Parece que no puedo mostrar las imágenes cuando el usuario presiona "Siguiente imagen". Cualquier recomendación sería muy apreciada.
JS:
var images = ["/aboutmepages/imagesAM/SSR.jpeg", "/aboutmepages/imagesAM/ATA.png", "/aboutmepages/imagesAM/BC.jpg", "/aboutmepages/imagesAM/GCU.jpg" ]; var current = 0; //current image displayed var change_img = document.getElementById("placeholder"); function next() { if (current >= 0) { current = images.length; current++; } change_img.src = images[current].src; }
HTML
<img src="/aboutmepages/imagesAM/SSR.jpeg" id="placeholder"> <div id="display"> <button class="button" onclick="next()">Next Image</button> </div>
Debe agregar src
como la image
en la matriz de images
usando el índice current
function next() { if (current === images.length) current = 0; change_img.src = images[current++]; }
NOTE: I've used lorem-picsum for demo purpose. You can add yours link
var images = [ "https://picsum.photos/200/300", "https://picsum.photos/200", "https://picsum.photos/200/300", "https://picsum.photos/200", "https://picsum.photos/200/300", "https://picsum.photos/200" ]; var current = 0; //current image displayed var change_img = document.getElementById("placeholder"); function next() { if (current === images.length) current = 0; change_img.src = images[current++]; } const button = document.querySelector("button"); button.addEventListener("click", next);
<div id="display"> <button class="button">Next Image</button> </div> <img src="https://picsum.photos/200" id="placeholder" />
El problema clave es esta línea:
change_img.src = images[current].src;
Debería ser
change_img.src = images[current];
ya que no tiene propiedades src
en ninguno de los elementos de la matriz, solo cadenas en los índices de la matriz.
En lugar de verificar que current >= 0
(ya sabemos que será cero), verifique que current
sea menor que la longitud de la matriz (porque las matrices usan un índice basado en cero).
const images = [ 'https://dummyimage.com/100x100/00ff00/000', 'https://dummyimage.com/100x100/0000ff/fff', 'https://dummyimage.com/100x100/000/fff', 'https://dummyimage.com/100x100/fff/000', ]; const placeholder = document.getElementById('placeholder'); const button = document.querySelector('button'); button.addEventListener('click', next, false); let current = 0; function next() { if (current < images.length) { placeholder.src = images[current]; ++current; } } next();
<button>Next</button> <img id="placeholder" />