使用 html 显示图片

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 显示图片

Using html to show images

html

image

click

onclick