javascript - 在图片上显示图片

Question

我的期末考试遇到了一些麻烦。我所有的 img 都设置为 0 不透明度并在单击时更改(不透明度 1)。我的设计要求单击按钮时，我会在其顶部显示一个额外的图像，延迟 1 秒。 IE 描述显示的每一层/img。当用户点击关闭时，他们都会随之离开并出现新的幻灯片，然后延迟 1 秒显示该层的新描述。

这是我当前的 js 代码:

window.onload = intialize;
function intialize(){
    var suit = document.getElementById("man").getElementsByTagName("img")[0];
    var undies = document.getElementById("man").getElementsByTagName("img")[1];
    var naked = document.getElementById("man").getElementsByTagName("img")[2];

    var suit = document.getElementById("layernav").getElementsByTagName("a")[0];
    var undies = document.getElementById("layernav").getElementsByTagName("a")[1];
    var naked = document.getElementById("layernav").getElementsByTagName("a")[2];   

//initial load suit
    showSuit();

    suit.onclick = showSuit;
    undies.onclick = showUndies;
    naked.onclick = showNaked;
}


function showSuit(){
    var suit = document.getElementById("man").getElementsByTagName("img")[0];
    var undies = document.getElementById("man").getElementsByTagName("img")[1];
    var naked = document.getElementById("man").getElementsByTagName("img")[2];

    suit.style.opacity = "1";
    undies.style.opacity ="0";  
    fbnaked.style.opacity ="0"; 
}

function showUndies(){
    var suit = document.getElementById("man").getElementsByTagName("img")[0];
    var undies = document.getElementById("man").getElementsByTagName("img")[1];
    var naked = document.getElementById("man").getElementsByTagName("img")[2];

    suit.style.opacity = "0";
    undies.style.opacity ="1";
    naked.style.opacity ="0";   
}

function showNaked(){
    var suit = document.getElementById("man").getElementsByTagName("img")[0];
    var undies = document.getElementById("man").getElementsByTagName("img")[1];
    var naked = document.getElementById("man").getElementsByTagName("img")[2];

    suit.style.opacity = "0";
    undies.style.opacity ="0";
    naked.style.opacity ="1";   
}

两个问题，一个是如何添加到这段代码中。其次，这个不断增长的 JS 有简写吗，因为我的层现在越来越长了。

提前谢谢你，我真的很累，而且离完成或根本没有完成太近了。

干杯!

我觉得它也可以看起来像这样，我就是拼不出来:

http://jsfiddle.net/gtU56/2/

无论是点击还是延迟，我只是在第二个 img/描述中尝试图层。有什么想法吗？

Answer 1

要使图像重叠，您可能需要 position: relative 或 position: absolute，以及 css 中的 zindex。

http://www.w3schools.com/css/css_positioning.asp

对于速记，我建议您简单地创建一个函数来执行整个 document.getElementById("man").getElementsByTagName("img") 部分。或者，如果可以，只需使用 jQuery，这可以通过

轻松完成

var suit = $("#man img")[0];

http://jquery.com/

要延迟 1 秒，请使用 setTimeout

http://www.w3schools.com/js/js_timing.asp