Jquery Switching Between Several Images On Click

I'm trying to use jquery to switch between three images once you click on the image. Upon clicking on the third image, it switches it back to the first picture. Is there a way to

Solution 1:

This should do that:

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

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

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

        //if the current image is picture2.png, change it to picture3.png 
        } elseif(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");
        }
    }); 
});

Solution 2:

This works:

$(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));
    });
});

Online demo: http://jsbin.com/afito

Solution 3:

This is link might be helpful

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