通過Z-index在其他圖像之間進行JavaScript轉換

我有30個圖像的文件名相同，但以1到30之間的數字結尾。每個圖像都具有相同範圍的z-index ，把它們放在同一個div的對方頂部。現在，我希望圖像頂部到底部，而我連續增加其他圖像的z-索引1，直到id =「image30」的圖像達到特定位置，停止循環。當我在Firefox中執行此代碼時，出現一個彈出窗口，要求我停止腳本，但是當我檢查控制檯的錯誤時，沒有。通過Z-index在其他圖像之間進行JavaScript轉換

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

如果您需要更多的代碼，以幫助分析我的問題，我會很樂意進行編輯。我非常感謝能夠窺視分析代碼的例子，而不僅僅是我可以複製粘貼的解決方案。非常歡迎路線！提前致謝！

來源

2013-02-23 Marco Oliveira

什麼遞增1其他圖像的z-index的地步？ – Christophe 2013-02-23 18:30:14

這就像發送一張卡到甲板後面。曾經是最後一張牌，成爲倒數第二張牌。在這種情況下，「image29」變成「image30」，而先前的「image30」變成「image1」。 – 2013-02-23 18:31:51

這就是我的觀點，你只需要移動一張卡片... – Christophe 2013-02-23 18:34:24

您的循環正在檢查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-23 18:43:02 Christophe

否，ultimaImagem是具有「imagem」+ x的id的圖像。這個職位沒有任何區別。 – Christophe 2013-02-23 18:52:49

那麼，這是否意味着「x」不會被30取代？ – 2013-02-23 18:57:29

x被替換爲30，但它不會改變它變成無限循環的事實，因爲ultimaImagem.style.zIndex！= 29將始終爲真 – Christophe 2013-02-23 19:00:27

通過Z-index在其他圖像之間進行JavaScript轉換

回答

相關問題