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

我有一组“图像”，每个图像具有不同的Z-index。顶部的“卡片”会连续下到Z-index最低的卡片（我们称之为“image1”），直到“image1”出现在其他顶部。这是一个动画，但我无法让for循环迭代一段时间。我想在1秒内尝试30张图片。下面是代码：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.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的功能，但我恐怕我做错了（安置，也许？）。如果你需要，我会用我试过的代码编辑代码。

来源

2013-02-26 Marco Oliveira

没有你所尝试的，很难猜测你的问题，但也许这（有关问题）（http://stackoverflow.com/questions/14791158/javascript-settimeout-and-loops）将帮助？ – 2013-02-26 14:31:01

我马上编辑！问题是，我尝试了很多方法，所以我必须选择一个。 – 2013-02-26 14:32:12

这就是你想要的吗？

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-26 14:45:18

不幸的是，它不起作用。之前，我可以改变每张图片的Z-index。有了这段代码，它不会改变我想要的。尽管我会用你的推理来适应我的所见，并看看它是否有效。顺便说一下，有一些推荐的阅读材料可以帮助我们改进吗？我从阅读和分析代码开始，使用w3schools写我自己。这是我的第一个项目，但我发现的书不涉及这个主题。 – 2013-02-26 14:58:03

它的工作！谢谢！我意识到我做错了！ – 2013-02-26 19:04:42

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

回答

相关问题