Question

我有一副“图像”，每个图像都有不同的Z指数。顶部的“卡片”将连续进入具有最低Z-index（让我们称之为“image1”）的卡片下方，直到“image1”出现在其他卡片的顶部。这是一个动画，但我不能让for循环以设定的时间迭代。我想在1秒内尝试30张图像。这是代码：

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.backgroundColor="rgb(255,255,255)"
        image.style.position="absolute";
        image.style.zIndex=counter;
        div.appendChild(image);
    }
};

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

任何帮助都非常感谢！我尝试了一些 setTimeout 函数，但我担心我做错了（放置，也许？）。如果您需要，我将使用我尝试的内容编辑代码。

Answer 1

这就是你想要的吗？

var animaRight = function(x) {
    var imageArray = [];
    for (counter=1;counter<=x;counter++) {
        imageArray.push(document.getElementById("imagem"+counter));
    }
    for (var i=0; i<x; i++) {
        (function(i) {
            setTimeout(function(){
                imageArray[i%imageArray.length].style.zIndex=i*-1
            }, i*1000);
        })(i);
    }
};

如果它符合您的要求，我会再解释一下。

JavaScript - 用于堆叠图像的循环迭代延迟

1 个答案: