通过 Z-index 在其他图像之上的图像之间的 JavaScript 转换

Question

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

---

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

Answer 1

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

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

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

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

var ultimaImagem = document.getElementById("imagem"+x);
ultimateImagem.style.zIndex -= x;