显示多个图像-javascript
[英]reveal more than one image - javascript
问题描述
This piece i am creating is a comic. 
我正在创作的作品是漫画。
the comic images will be hidden until a user clicks the mouse 漫画图像将一直隐藏，直到用户单击鼠标为止
the hope is that the images will then reveal them self one at a time (per users click) 希望这些图像可以一次显示一次自我（每位用户点击）
at the moment however when one image is shown it will dissapear when the user clicks to show the next image 但是，当显示一幅图像时，当用户单击以显示下一幅图像时，它将消失
how can i set it up so that the image doesnt dissapear when the user clicks? 我如何设置它，以便当用户单击时图像不会消失？
<!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>
2 个解决方案
解决方案1
1 2015-02-21 16:10:40
By removing this line 通过删除此行
document.getElementById(images[curImage]).style.opacity = "0";
The image won't disappear when a user clicks. 用户单击时图像不会消失。
But i guess you should modify your code a little (I don't think current version will work the way you want it to work) 但是我想您应该稍微修改一下代码（我认为当前版本不会按照您希望的方式工作）
function windowClick() {
if(curImage < images.length - 1)
{
document.getElementById(images[curImage]).style.opacity = "1";
curImage++;
}
}
Because every time you should increment the curImage and then display the image with index curImage to show the next image. 因为每次您都应该增加curImage ，然后显示带有索引curImage的图像以显示下一个图像。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.