0

私は画像の「デッキ」を持っており、それぞれが異なるZインデックスを持っています。一番上の「カード」は、「image1」が他のカードの上に表示されるまで、Zインデックスが最も低いカード（「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関数を試しましたが、間違っているのではないかと思います（配置、多分？）。必要に応じて、試したコードを編集します。

4

1 に答える 1

0

それはあなたが望むものですか？

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

それがあなたが望むことをするなら、私はそれをもっと説明します。

于 2013-02-26T14:45:18.530 に答える