javascript - Jquery switching between several images on click - Stack Overflow

admin管理员组

文章数量:1352177

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 adapt the following to switch between more than two pictures, and for it to allow more than it switching once?

jQuery

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

HTML

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

Thanks.

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 adapt the following to switch between more than two pictures, and for it to allow more than it switching once?

jQuery

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

HTML

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

Thanks.

• javascript
• jquery
• attributes

Share Improve this question Follow edited May 4, 2015 at 6:07 Huey 5,22066 gold badges3535 silver badges4444 bronze badges asked Jul 12, 2009 at 11:25 user137000user137000

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

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.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");
        }
    }); 
});

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./afito

This is link might be helpful

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

本文标签： javascriptJquery switching between several images on clickStack Overflow