在图片上显示图片

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

Answer 2

对于减少代码长度的问题，我总是包含一个具有短名称的函数来替换document.getElementById，例如：

function E(i) {return document.getElementById(i)}

像jquery这样的框架已经提供了这一点。使用一个额外的函数可以很容易地减少您当前的代码，以避免一些重复。

function E(i) {
    return document.getElementById(i)
}
window.onload = intialize;

function intialize() {
    var n = E('layernav').getElementsByTagName('a');
    showSuit();
    n[0].onclick = showSuit;
    n[1].onclick = showUndies;
    n[2].onclick = showNaked;
}

function setManOpacity(op0, op1, op2) {
    var i = E('man').getElementsByTagName('img');
    i[0].style.opacity = op0;
    i[1].style.opacity = op1;
    i[2].style.opacity = op2;
}

function showSuit() {
    setManOpacity(1, 0, 0);
}

function showUndies() {
    setManOpacity(0, 1, 0);
}

function showNaked() {
    setManOpacity(0, 0, 1);
}​