Question

我正在尝试用html创建一个小程序。

基本上我有一系列的图像在一起。我的想法是将图像不透明度设置为0，直到用户点击页面。

当他们做其中一个图像时将会显示，当他们再次点击时，将显示下一个图像

这有多容易

我看到的大部分都涉及JS，这是一种我很难与

进行编码的语言

Answer 1

您可以使用window.onclick或document.onclick来处理用户点击该页面。请注意，这需要JavaScript。

尝试这样的事情：

var curImage = 0;
var images = ["image1","image2","image3"];

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

window.onclick = windowClick;

如果您按原样使用我的代码，则必须为要切换的每个图像分配id，并将这些id放入images数组中

的jsfiddle： http://jsfiddle.net/n4f1tkv9/2/

Answer 2

heres what i have so far:

<!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[curImage + 1]).style.opacity = "1";
        curImage++;
    }
    else
    {
        document.getElementById(images[0]).style.opacity = "1";
        curImage = 0;
    }
}

window.onclick = windowClick;

</script>

what i would like is the image to remain once i click and the next image to then come in.

im sure its a simple fix and im just being stupid

使用html显示图像

2 个答案: