1

我有 30 张文件名相同的图像，但以 1 到 30 范围内的数字结尾。每个图像都有一个相同范围的 z-index，将它们放在同一个 div 中。现在，我希望顶部的图像到底部，同时我将其他图像的 z-index 连续增加 1，直到 id="image30" 的图像到达某个位置，循环停止。当我在 Firefox 中执行此代码时，我得到一个弹出窗口，要求我停止脚本，但是当我检查控制台是否有错误时，没有任何错误。

function placeImage(x) {
    var div = document.getElementById("div_picture_right");
    div.innerHTML = ""; // clear images

    for (counter=1;counter<=x;counter++) {
        var image=document.createElement("img");
        image.src="borboleta/Borboleta"+counter+".png";
        image.width="195";
        image.height="390";
        image.alt="borboleta"+counter;
        image.id="imagem"+counter;
        image.style.position="absolute";
        image.style.zIndex=counter;
        div.appendChild(image);
    }
};

var animaRight = function(x) {
    var imageArray = [];
    for (counter=0;counter<x-1;counter++) {
        imageArray[counter] = document.getElementById("imagem"+counter+1);
        }
    setTimeout(function() {
        for (var number in imageArray) {
            if (imageArray[number].style.zIndex==number+1) {
                imageArray[number].style.zIndex=imageArray.length-counter;
            }
        }
    }, 1000/x);
};

window.onload = function() {
    placeImage(30);
    document.getElementById("div_picture_right").onclick=function() {animaRight(30)}
};

如果您需要更多代码来帮助分析我的问题，我很乐意对其进行编辑。我很欣赏可以查看代码进行分析的示例，而不是我可以复制粘贴的解决方案。方向是最受欢迎的！提前致谢！

4

1 回答 1

0

您的循环正在检查ultimateImagem。也许您的意思是检查图像？例如：

    while (image.style.zIndex != x-1) {
      ...
    }

您的 while 循环不会修改 ultimaImagem，因此检查ultimaImagem.style.zIndex会创建一个无限循环。

此外，正如我在评论中所说，您可以移动顶部图像，无需重新索引其他图像。例如，给 imagem1 一个 z-index 1001，给 imagem2 一个 z-index 1002，等等。然后你的代码就变成了：

var ultimaImagem = document.getElementById("imagem"+x);
ultimateImagem.style.zIndex -= x;
于 2013-02-23T18:43:02.920 回答