争夺图像-Javascript

Question

我有一张3x4的图像表，我想像拼图一样乱七八糟。总共有12个独立的GIF。我需要帮助的地方是，严格使用JavaScript，我怎么设置它，以便在每次页面加载时随机加扰图像？到目前为止，我已加载的所有图片到一个数组，像这样：

不完整的JS：

var imgArray = new Array(); 

imgArray[0] = new Image(); 
imgArray[0].src = 'pic_01.gif'; 

imgArray[1] = new Image(); 
imgArray[1].src = 'pic_02.gif'; 

imgArray[2] = new Image(); 
imgArray[2].src = 'pic_03.gif'; 

imgArray[3] = new Image(); 
imgArray[3].src = 'pic_04.gif'; 

etc... pic_05.gif... 

我的HTML：

<table> 
<tr> 
    <th> <img src="pic_01.gif" onclick="imageSwap()" alt="" border= height=100   width=100></img> </th> 
    <td> <img src="pic_02.gif" alt="" border= height=100 width=100></img></td> 
    <td> <img src="pic_03.gif" alt="" border= height=100 width=100></img></td> 
</tr> 
<tr> 
    <td> <img src="pic_04.gif" alt="" border= height=100 width=100></img></td> 
    <td> <img src="pic_05.gif" alt="" border= height=100 width=100></img></td> 
    <td> <img src="pic_06.gif" alt="" border= height=100 width=100></img></td> 
</tr> 
<tr> 
    <td> <img src="pic_07.gif" alt="" border= height=100 width=100></img></td> 
    <td> <img src="pic_08.gif" alt="" border= height=100 width=100></img></td> 
    <td> <img src="pic_09.gif" alt="" border= height=100 width=100></img></td> 
</tr> 
<tr> 
    <td> <img src="pic_10.gif" alt="" border= height=100 width=100></img></td> 
    <td> <img src="pic_11.gif" alt="" border= height=100 width=100></img></td> 
    <td> <img src="pic_12.gif" alt="" border= height=100 width=100></img></td> 
</tr> 
</table> 

我最终会想要做的是能让用户点击一个“随机”图像，并将其与另一个“随机”图像交换，以解决这个难题。任何输入是赞赏！谢谢！

Answer 1

我认为最好的方法是添加一个类（比方说random）每个img元素：

<img src="pic_10.gif" class="random" alt="" height=100 width=100 /> 

然后，我们可以得到所有的图像用一个简单的querySelectorAll：

var images = document.querySelectorAll('.random'); 

随机数组src s：

var srcs = ['pic_01.gif', 'pic_01.gif', etc, etc]; 
srcs = srcs.sort(function() { return Math.random() > 0.5; }); 

然后在图像上迭代，采用新的SRC每个：

for (var i = 0; i < images.length; ++i) { 
    images[i].src = srcs[i]; 
} 

全功能的存在：

var imageSwap = function() { 
    var images = document.querySelectorAll('.random'); 

    var srcs = ['pic_01.gif', 'pic_01.gif', etc, etc]; 
    srcs = srcs.sort(function() { return Math.random() > 0.5; }); 


    for (var i = 0; i < images.length; ++i) { 
    images[i].src = srcs[i]; 
    } 
}; 

Example JSFiddle