單擊按鈕后如何更改圖像

Question

很抱歉成為這樣的菜鳥，但是在編程方面，我遇到了很多困難，因此，如果有人可以幫助的話，那就太好了！

基本上，我試圖用一些圖像制作一個zindex，當我單擊按鈕時會在其中切換圖像。 我知道這可能是非常基本的，但是我對要做的事情很迷失。 我了解這個概念，但無法輸入。

我也試圖將圖像放在頁面中間。 我被推薦給以下人士； 但是，那沒有用。 有人可以幫忙嗎？

這是我所擁有的：

的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

它沒有改變，因為將xbone的zIndex設置為1仍然使它位於頂部。 如果您要對其他任何圖像執行此操作，它將顯示在頂部。

Answer 2

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

試試這個