Cómo cambiar las imágenes al hacer clic en el botón

Quiero cambiar la imagen presionando el botón. Tengo dos botones, uno es el siguiente y el anterior es anterior. Cuando se presione el siguiente botón, se debe mostrar la nueva imagen y el botón anterior debe presionar la última imagen. Pero no puedo hacer. esto correctamente. ¿Cómo hacer esto usando jQuery?

$(document).ready(function () { $('#image2').hide(); $('#image3').hide(); $(".arrow").click(function () { $('#image1').hide(); $('#image2').show(); }); }); 

Html es

 

http://jsfiddle.net/S6t9R/4/

 $(document).ready(function () { $('img:not(:first)').hide(); $(".arrow").click(function () { $('img:not(:last):visible'). hide(). parent(). next(). children(). show(); }); $(".leftarrow").click(function () { $('img:not(:first):visible'). hide(). parent(). prev(). children(). show(); }); }); 

básicamente, la imagen que está visible ahora está oculta, y la imagen siguiente / anterior ahora está visible.

Tal vez en este caso podría ocultar / mostrar los elementos div alrededor de sus imágenes. Si oculta una imagen de la forma en que lo hace, el div en sí seguirá siendo “visible” en el documento, que es probablemente lo que le da el resultado no deseado.

 Change your script, $(document).ready(function () { $('#secondimage').hide(); $('#thirdimage').hide(); $(".arrow").click(function () { $('#firstimage').hide(); $('#secondimage').show(); }); $(".leftarrow").click(function () { $('#firstimage').show(); $('#secondimage').hide(); }); }); 

¿Qué tal cambiar la imagen src?

JavaScript:

 var images = [ "http://www.miximages.com/javascript/alpha.jpg", "beta.jpg", "gamma.jpg" ]; var actImg = 0; // index of actual image $(document).ready(function () { $(".leftarrow").click(function () { if (actImg <= 0) { // if first image is displayed, jump to last actImg = images.length - 1; } else { actImg--; } $('#onlyimage').attr('src', images[actImg]); }); $(".rightarrow").click(function () { if (images.length <= actImg) { // if last image is displayed, jump to first actImg = 0; } else { actImg++; } $('#onlyimage').attr('src', images[actImg]); }); }); 

HTML:

 
 $(document).ready(function () { that = this; this.arrayImages = $('.image'); this.currentPosition = 0; $('#secondimage').hide(); $('#thirdimage').hide(); $(".arrow").click(function () { if (that.currentPosition < that.arrayImages.length) { that.arrayImages[that.currentPosition].hide(); that.arrayImages[that.currentPosition+1].show(); that.currentPosition++; } }); }); 

Para el leftarrow es sólo a la inversa (: