我试图让我的幻灯片放映通过以下方式更改图片：按下按钮应将显示的图像更改为按下的按钮

Question

基本上我使用的是 z-index 并通过单击按钮，它应该拍摄背面图片并将其置于正面，反之亦然。我目前一直在尝试让按钮工作。

<!DOCTYPE html>
<html lang="en">

    <head>
        <title>Lab 5, Part 1</title>
        <meta charset="utf-8" />
        <script type="text/javascript" src="stacking.js">
            function Luka() {
                var x = document.getElementById('anime1');
                var z = x.style.zIndex
                if (z == 10) z = 20;
                else z = 10;
                x.style.zIndex = z;
            }
        </script>
        <style type="text/css">
            .anime1 {
                position: absolute;
                top: 50px;
                left: 50px;
                z-index: 10;
            }
            .anime2 {
                position: absolute;
                top: 100px;
                left: 100px;
                z-index: 15;
            }
        </style>
    </head>

    <body>
        <p>
            <img class="anime1" id="anime1" height="300" width="450" src="http://images5.fanpop.com/image/photos/29300000/Megurine-Luka-megurine-luka-29391390-1680-1050.jpg" alt="(Picture of Luka)" />
            <img class="anime2" id="anime2" height="300" width="450" src="http://orig06.deviantart.net/a28f/f/2015/079/9/a/hinata_final_lr_by_artgerm-d8me6vb.jpg" alt="(Picture of Hinata)" />
        </p>
        <input type="button" value="Luka" onclick="Luka();">
        <input type="button" value="Hinata" onclick="Hinata();">
    </body>

</html>

Answer 1

    <script type="text/javascript">
        function Luka() {
            document.getElementById('anime1').style.zIndex = 20;
            document.getElementById('anime2').style.zIndex = 10;
        }
        function Hinata() {
            document.getElementById('anime2').style.zIndex = 20;
            document.getElementById('anime1').style.zIndex = 10;
        }
    </script>

用这个代码替换你的代码并检查它是否有效

Answer 2

<!DOCTYPE html>
<html lang = "en">
<head>
<title>Lab 5, Part 1</title>
<meta charset = "utf-8"/>
<script type = "text/javascript" >
function Luka(){
var x=document.getElementById('anime1');
var z=x.style.zIndex
if (z==10) z=20;
else z=10;
x.style.zIndex=z;
}
</script>
<style type = "text/css">
.anime1 {position: absolute;
top: 50px; left: 50px; z-index: 10;}
.anime2 {position: absolute; 
top: 100px; left: 100px; z-index: 15;}
</style>
</head>
<body>
<p>
<img class = "anime1" id = "anime1" height = "300"
width = "450" src = "http://images5.fanpop.com/image/photos/29300000/Megurine-Luka-megurine-luka-29391390-1680-1050.jpg" 
alt = "(Picture of Luka)"/>
<img class = "anime2" id = "anime2" height = "300"
width = "450" src = "http://orig06.deviantart.net/a28f/f/2015/079/9/a/hinata_final_lr_by_artgerm-d8me6vb.jpg" 
alt = "(Picture of Hinata)"/>
</p>
<input type="button" value="Luka" onclick="Luka();">
<input type="button" value="Hinata" onclick="Hinata();">

</body>
</html>

你所做的一切都是正确的。除非您在使用内联代码时在脚本标签上设置了 SRC 属性。

我试图让我的幻灯片放映通过以下方式更改图片：按下按钮应将显示的图像更改为按下的按钮

I am trying to get my slide show to change the picture by: pressing a button should change the displayed image to the button pressed

javascript

z-index