0
186
ViewsEstoy tratando de mostrar una imagen de una matriz de imágenes - javascript
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>2 answers
Answer question0
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" />0
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" />