1

ファイル名が同じであるが、1から30の範囲の番号で終わる画像が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)}
};

問題の分析に役立つコードがさらに必要な場合は、喜んで編集します。コピーして貼り付けることができる解決策よりも、分析のためにコードを覗くことができる例をいただければ幸いです。道順は大歓迎です！前もって感謝します！

4

1 に答える 1

0

あなたのループはultimateImagemをチェックしています。代わりに、画像をチェックするつもりですか？例えば：

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

whileループはultimaImagemを変更しないため、オンにultimaImagem.style.zIndexすると無限ループが作成されます。

また、コメントで述べたように、一番上の画像を移動するだけで、他の画像のインデックスを再作成する必要はありません。たとえば、imagem1に1001のz-indexを与え、imagem2に1002のz-indexを与えます。そうすると、コードは次のようになります。

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