如何加載要淡入淡出的圖像陣列？

Question

我有以下代碼，我僅加載一張圖像。 但是我想從e文件夾加載多個圖像，然后淡入淡出。 但是我感興趣的是如何從文件夾加載所有圖像而無需重復代碼，因為src =“ frames / frame_1” src =“ frames / frame_2”我想要一些像src =“ frames / frame_” + i +“ .jpg”，其中i是幀號

這就是我現在僅加載一張圖像的方式

var img = new Image();
var div = document.getElementById('foo');

img.onload = function() {
  div.appendChild(img);
};

img.src = 'frames/frame_1.jpg';

Answer 1

這比較簡單。 您基本上將已經擁有的代碼放入循環中：

var img, i,
    imageCount = 5,
    div = document.getElementById('foo');

for(i = 0; i < imageCount; i++){
    img = new Image();
    img.onload = function() {
        div.appendChild(img);
    };
    img.src = 'frames/frame_' + i + '.jpg';
}

Answer 2

您可以將循環for ：

var img,
    div = document.getElementById('foo');

for (var i = 0, nbImg = 5; i < nbImg; i++) {
  img = new Image();

  img.onload = function() {
    div.appendChild(img);
  };

  img.src = 'frames/frame_'+i+'.jpg';
}