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

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

Answer 2

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

尝试这样的事情

单击按钮时如何更改图像

2 个答案: