0

我很抱歉成为这样的菜鸟，但是在编程方面我遇到了很多困难，所以如果有人可以提供帮助，那就太好了！

基本上，我正在尝试使用一些图像制作一个 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/

4

2 回答 2

0

它没有改变，因为将 xbone 的 zIndex 设置为 1 仍然使其位于顶部。如果您要对任何其他图像执行此操作，它将显示在顶部。

于 2013-10-16T01:08:26.953 回答
0 
function changeStackOrder() {
    $("img").each(function() {
        $(this).css("zIndex", "+=1");
        if($(this).css("zIndex") == "0"){
            $(this).css("zIndex", "-3");
        }
    });
}

尝试这样的事情

于 2013-10-16T04:27:15.433 回答