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 / description中尝试图层。任何想法？

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/

使用setTimeout

进行1秒延迟

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);
}

在图片上显示图片

2 个答案: