Question

我正在制作的这部作品是一部漫画。

漫画图像将被隐藏，直到用户点击鼠标

希望图像能够一次一个地显示它们（每个用户点击一次）

此刻，当显示一个图像时，当用户点击显示下一个图像时，它将消失

如何设置它以便在用户点击时图像不会消失？

<!DOCTYPE html>
    <html>
    <head>
    <style>
    body {
        color: red;
        background-color: #1F2A22;
    }

    h1 {
        color: #00ff00;
        }

    </style>
    </head>
    <body>

    <img id="fans6" IMG STYLE="position:absolute; TOP:35px; LEFT:170px; WIDTH:800px; HEIGHT:600px" SRC="fans6.png">
    <img id="impact6" IMG STYLE="position:absolute; TOP:35px; LEFT:170px; WIDTH:800px; HEIGHT:600px" SRC="impact6.png">
    <img id="text6" IMG STYLE="position:absolute; TOP:35px; LEFT:170px; WIDTH:800px; HEIGHT:600px" SRC="text6.png">
    <img id="panel7"IMG STYLE="position:absolute; TOP:35px; LEFT:170px; WIDTH:800px; HEIGHT:600px" SRC="panel7.png">
    <img id="atom7"IMG STYLE="position:absolute; TOP:35px; LEFT:170px; WIDTH:800px; HEIGHT:600px" SRC="atom7.png">
    <img id="fantext7"IMG STYLE="position:absolute; TOP:35px; LEFT:170px; WIDTH:800px; HEIGHT:600px" SRC="text fan7.png">
    <img id="text7"IMG STYLE="position:absolute; TOP:35px; LEFT:170px; WIDTH:800px; HEIGHT:600px" SRC="text7.png">
    <img id="fans7"IMG STYLE="position:absolute; TOP:35px; LEFT:170px; WIDTH:800px; HEIGHT:600px" SRC="fans7.png">
    <img id="panel8"IMG STYLE="position:absolute; TOP:35px; LEFT:170px; WIDTH:800px; HEIGHT:600px" SRC="panel8.png">
    <img id="bang8"IMG STYLE="position:absolute; TOP:35px; LEFT:170px; WIDTH:800px; HEIGHT:600px" SRC="bang8.png">
    <img id="panel9"IMG STYLE="position:absolute; TOP:35px; LEFT:170px; WIDTH:800px; HEIGHT:600px" SRC="panel9.png">
    <img id="reporter9"IMG STYLE="position:absolute; TOP:35px; LEFT:170px; WIDTH:800px; HEIGHT:600px" SRC="reporter9.png">
    <img id="text9"IMG STYLE="position:absolute; TOP:35px; LEFT:170px; WIDTH:800px; HEIGHT:600px" SRC="text9.png">
    <img id="panel10"IMG STYLE="position:absolute; TOP:35px; LEFT:170px; WIDTH:800px; HEIGHT:600px" SRC="panel10.png">
    <img id="full10"IMG STYLE="position:absolute; TOP:35px; LEFT:170px; WIDTH:800px; HEIGHT:600px" SRC="panel full10.png">
    <img id="text10"IMG STYLE="position:absolute; TOP:35px; LEFT:170px; WIDTH:800px; HEIGHT:600px" SRC="text10.png">
    <img id="end10"IMG STYLE="position:absolute; TOP:35px; LEFT:170px; WIDTH:800px; HEIGHT:600px" SRC="the end10.png">

    <script>

    var curImage = 0;
    var images = ["fans6","impact6","text6"];

    function windowClick() {
        document.getElementById(images[curImage]).style.opacity = "0";
        if(curImage < images.length - 1)
        {

            document.getElementById(images[0]).style.opacity = "1";
            curImage = 0;
        }
    }




    window.onclick = windowClick;

    </script>





    </body>
    </html>

Answer 1

删除此行

        document.getElementById(images[curImage]).style.opacity = "0";

用户点击时图片不会消失。

但我想你应该稍微修改你的代码（我不认为当前版本会按你希望的方式工作）

 function windowClick() {
        if(curImage < images.length - 1)
        {
            document.getElementById(images[curImage]).style.opacity = "1";
            curImage++;
        }
    }

因为每次都应增加curImage，然后显示索引为curImage的图像以显示下一张图像。

Answer 2

除了脚本问题pointed out by void之外，由于相同的绝对位置和大小，所有图像似乎都位于彼此之上，因此其中一个图像会遮挡所有其他图像。

揭示多个图像 - javascript

2 个答案: