单击按钮后如何更改图像

Question

Im sorry to be such a noob but when it comes to programming i have a lot of difficulty so if someone could help that would be great!

Basically I am trying to make a zindex with a few images in which I'd like when I click the button it switches the image. I know this is probably very basic but I am very lost on what to do. I understand the concept but cannot input it.

I am also trying to get the images to be in the middle of the page. I was recommended to the following; however, that did not work. Can someone please help?

Here is what I have:

CSS

#xbone {
    position:absolute;
    left:0px;
    top:0px;
    margin-left: auto;
    margin-right: auto;
    z-index:-1
}
#ps4 {
    position:absolute;
    left:0px;
    top:0px;
    margin-left: auto;
    margin-right: auto;
    z-index:-2
}
#wiiu {
    position:absolute;
    left:0px;
    top:0px;
    margin-left: auto;
    margin-right: auto;
    z-index:-3
}

JavaScript

function changeStackOrder() {
    document.getElementById("xbone").style.zIndex="1";
}

HTML

<img id="xbone" alt="Xbox One" width="800" height="600"
     src="http://assets1.ignimgs.com/vid/thumbnails/user/2013/06/19/XboxOne1.jpg">
<img id="ps4" alt="Playstation 4" width="800" height="600"
     src="http://www.nowgamer.com/siteimage/scale/0/0/360062.jpg" >
<img id="wiiu" alt="Wii U" width="800" height="600"
     src="http://venturebeat.files.wordpress.com/2013/07/wii-u.jpg" >
<input type="button" onclick="changeStackOrder()" value="Change stack order">

JsFiddle: http://jsfiddle.net/GkGJw/

Answer 1

It is not changing because setting the zIndex of xbone to one still makes it on top. If you would do it for any of the other images it would appear on top.

Answer 2

function changeStackOrder() {
    $("img").each(function() {
        $(this).css("zIndex", "+=1");
        if($(this).css("zIndex") == "0"){
            $(this).css("zIndex", "-3");
        }
    });
}

Try something like this