如何让图像在单击按钮时更改

How do I get the image to change when the button is clicked

本文关键字：按钮 单击 图像      更新时间：2023-09-26

我很抱歉成为这样的菜鸟，但在编程方面我有很多困难，所以如果有人能帮忙，那就太好了！

基本上，我正在尝试制作一个带有一些图像的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">

小提琴：http://jsfiddle.net/GkGJw/

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

尝试这样的事情

它没有改变，因为将 xbone 的 zIndex 设置为 1 仍然会让它在顶部。如果您为任何其他图像执行此操作，它将出现在顶部。

相关文章：