Jquery commutation entre plusieurs images sur clic

Question

J'essaie d'utiliser jquery pour basculer entre trois images une fois que vous cliquez sur l'image. En cliquant sur la troisième image, il revient à la première image.

Y at-il un moyen d'adapter ce qui suit pour basculer entre plus de deux images, et pour permettre plus qu'une simple commutation?

jQuery

$(document).ready(function() { 
    $("#clickMe").click(function() { 
     $("#myimage").attr({src : "picture2.png"}); 
    }); 
}); 

HTML

<div id="clickMe"><img id="myimage" src="picture1.png" /></div> 

Merci.

Answer 1

Cela devrait faire:

$(document).ready(function() { 
    $("#clickMe").click(function() { 

     var src = $('#myimage').attr('src'); 

     //if the current image is picture1.png, change it to picture2.png 
     if(src == 'picture1.png') { 
      $("#myimage").attr("src","picture2.png"); 

     //if the current image is picture2.png, change it to picture3.png 
     } else if(src == "picture2.png") { 
      $("#myimage").attr("src","picture2.png"); 

     //if the current image is anything else, change it back to picture1.png 
     } else { 
      $("#myimage").attr("src","picture2.png"); 
     } 
    }); 
}); 

Answer 2

Ce lien est peut-être utile

http://www.sohtanaka.com/web-design/fancy-thumbnail-hover-effect-w-jquery/

Answer 3

Cela fonctionne:

$(document).ready(function() { 
    var i = 1; // Used to keep track of which image we're looking at 
    $("#clickMe").click(function() { 
     i = i < 3 ? i + 1 : 1; 
     $("#myimage").html("picture#.png".replace("#", i)); 
    }); 
}); 

Démo en ligne: http://jsbin.com/afito