如何创建一个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"; 
} 

你需要让他们有一个索引来重命名你的图片。