JavaScript 通过 Z-index 在图像之间进行转换

Question

我有 30 个图像，它们的文件名相同，但以 1 到 30 范围内的数字结尾。每个图像都有相同范围的 z 索引，将它们放在同一 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 会创建无限循环。

此外，正如我在评论中所说，您可以只移动顶部图像，无需重新索引其他图像。例如，为 imagem1 指定 z 索引 1001，为 imagem2 指定 z 索引 1002，等等。然后您的代码将变为:

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