Jquery在单击时在多个图像之间切换答案

【问题标题】：Jquery switching between several images on clickJquery在单击时在多个图像之间切换
【发布时间】：2009-07-12 11:25:49
【问题描述】：

单击图像后，我正在尝试使用 jquery 在三个图像之间切换。单击第三张图片后，它会切换回第一张图片。

有没有办法调整以下内容以在两张以上的图片之间切换，并允许它多次切换一次？

jQuery

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

HTML

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

谢谢。

【问题讨论】：

标签： javascript jquery attributes

【解决方案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");
        }
    }); 
});

【讨论】：

您的代码中有一个小错字：elseif 应该是 else if

【解决方案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

【讨论】：

【解决方案3】：

这个链接可能有用

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

【讨论】：