如何创建一个for循环以将一系列图片放在javascript中的数组中

Question

我在一个文件夹中有 20 张照片。我想创建一个包含 20 个单元格的表格。首先，我想将所有图像放在一个数组中，然后将源提供给每个单元格。我的意思是[0].src 是一个显示的图片单元格。问题是我不想为每个索引重复我的代码 20 次。

 <table id="game" align="left" width="100" height="100" border="2">

<tr>

<td class="fruitCells" id="cel1"><img id="img1" /></td>

<td class="fruitCells" id="cel2"><img src=images/image_apples.jpg /></td>
<td class="fruitCells" id="cel3"><img src=images/oranges.jpg /></td>
<td class="fruitCells" id="cel4"><img src=images/oranges.jpg /></td>
<td class="fruitCells" id="cel5"><img src=images/mangos.jpg /></td>
</tr>
<tr>
<td class="fruitCells" id="cel6"><img src=images/mangos.jpg /></td>
<td class="fruitCells" id="cel7"><img src=images/grapes.jpg /></td>
<td class="fruitCells" id="cel8"><img src=images/grapes.jpg /></td>
<td class="fruitCells" id="cel9"><img src=images/cherrys.jpg /></td>
<td class="fruitCells" id="cel10"><img src=images/cherrys.jpg /></td>
</tr>
<tr>
<td class="fruitCells" id="cel11"><img src=images/apricots.jpg  /></td>
<td class="fruitCells" id="cel12"><img src=images/apricots.jpg /></td>
<td class="fruitCells" id="cel13"><img src=images/plums.jpg /></td>
<td class="fruitCells" id="cel14"><img src=images/plums.jpg /></td>
<td class="fruitCells" id="cel15"><img src=images/pears.jpg /></td>
</tr>
<tr>
<td class="fruitCells" id="cel16"><img src=images/pears.jpg /></td>
<td class="fruitCells" id="cel17"><img src=images/peaches.jpg /></td>
<td class="fruitCells" id="cel18"><img src=images/peaches.jpg /></td>
<td class="fruitCells" id="cel19"><img src=images/kiwi.jpg /></td>
<td class="fruitCells" id="cel20"><img src=images/kiwi.jpg /></td>
</tr>
</table>

</td>

</table>
<script>
// it doesn't work
var fruitArray = new Array(19);

for (var i= 0;i <20;i++) {
   fruitArray[i] = new Image();
   fruitArray[i].src = "images/image_" + i + ".jpg";
}

//this one works

fruitArray[0] = new Image();
fruitArray[0].src = "images/apples.jpg"

fruitArray[1] = new Image();
fruitArray[1].src = "images/oranges.jpg"

fruitArray[2] = new Image();
fruitArray[2].src = "images/mangos.jpg"

fruitArray[3] = new Image();
fruitArray[3].src = "images/grapes.jpg"

fruitArray[4] = new Image();
fruitArray[4].src = "images/cherrys.jpg"

fruitArray[5] = new Image();
fruitArray[5].src = "images/apricots.jpg"

fruitArray[6] = new Image();
fruitArray[6].src = "images/plums.jpg"

fruitArray[7] = new Image();
fruitArray[7].src = "images/pears.jpg"

fruitArray[8] = new Image();
fruitArray[8].src = "images/peaches.jpg"

fruitArray[9] = new Image();
fruitArray[9].src = "images/kiwi.jpg"

fruitArray[10] = new Image();
fruitArray[10].src = "images/apples.jpg"

fruitArray[11] = new Image();
fruitArray[11].src = "images/oranges.jpg"

fruitArray[12] = new Image();
fruitArray[12].src = "images/mangos.jpg"

fruitArray[13] = new Image();
fruitArray[13].src = "images/grapes.jpg"

fruitArray[14] = new Image();
fruitArray[14].src = "images/cherrys.jpg"

fruitArray[15] = new Image();
fruitArray[15].src = "images/apricots.jpg"

fruitArray[16] = new Image();
fruitArray[16].src = "images/plums.jpg"

fruitArray[17] = new Image();
fruitArray[17].src = "images/pears.jpg"

fruitArray[18] = new Image();
fruitArray[18].src = "images/peaches.jpg"

fruitArray[19] = new Image();
fruitArray[19].src = "images/kiwi.jpg"


document.getElementById("img1").src = fruitArray[0].src;
</script>`

如何循环播放？

Answer 1

这是循环：

var a = [];
for (var i = 0;i < 20) {
    a[i] = new Image();
    a[i].src = "images/image_" + i + ".jpg";
} 

您需要重命名您的图片，以便它们有一个索引。