Jquery переключения между несколькими изображениями по клику

Question

Я пытаюсь использовать jquery для переключения между тремя изображениями, когда вы нажимаете на изображение. После нажатия на третье изображение, оно переключается обратно на первое изображение.

Есть ли способ адаптировать следующее для переключения между более чем двумя изображениями и разрешить переключение более одного раза?

JQuery

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

HTML

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

Спасибо.

Answer 1

Это должно сделать это:

$(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

Это работает:

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

Онлайн демо: http://jsbin.com/afito

Answer 3

Эта ссылка может быть полезной

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