jquery 实现更改图片路径

如何用JS实现 原来是这个图片（01.png）点击之后变成（02.png）
点击另一个（03.png）之后变成(04.PNG)

请教大神们如何实现。。。本人JS小白 请各位帮忙简单写一下

<img src="01.png" οnclick="changeImg()" id="img"/>

function changeImg(){

    $("img").attr("src","02.png");
}

追问

太感谢您了，实现了，但是请问 怎么单机03.png的时候显示04.png（按您写的） 而之前显示的02.png重新变成原来的01.png

追答

可以写一个function先初始化所有的图片，在把要改的这个图片改了，
<img src="01.png" οnclick="changeImg(imgid)" id="imgid"/>//每张图片的imgid要是不一样的
图片的命名要有规律。
比如暗色的为00.png、01.png、02.png
亮色的为10.png、11.png、12.png
图片id   img00 img01 img02

function changeImg(imgid){
    //初始化所有的图片

    $("img").each(function(i,n){
            $(this).attr("src",“0”+i+".png");
            if($(this).attr("id")==imgid){
                $(this).attr("src",“1”+i+".png");//修改点击的那张图
            }
      });
}

body里面：
<IMG id="png_1" src="/01.png" />

引入JQuery，JS里面写
$(function(){

$("#png_1").click(function(){
$(this).attr("src","/02.png");
})；
});

追问

太谢谢了，实现了，我想做一排这样的按钮，请问如何点击（03.png）之后变成（04.png）而（02.png）重新变成（01.png）呢，请您指点一下下

追答

$(function(){
    $("img").click(function(){
        init_png;
    });
    $("#png_1").click(function(){
        $(this).attr("src","/02.png");
    });
    $("#png_2").click(function(){
        $(this).attr("src","/04.png");
    }); 
   $("#png_3").click(function(){
        $(this).attr("src","/06.png");
    });
});
 
init_png=function(){
    //初始化
    $("#png_1").attr("src","/01.png");
    $("#png_2").attr("src","/03.png");
    $("#png_3").attr("src","/05.png");
}

原文:

https://zhidao.baidu.com/question/1731991627236180307.html?fr=iks&word=jquery++%B6%E0%CD%BC%D1%A1%D6%D0%B8%FC%B8%C4%CD%BC%C6%AC&ie=gbk