我试图以随机顺序创建一个包含4个图像的表。单击一个图像时，它应该与顺时针方向的图像一起移动。然而，当我这样做时，我有两个对角线图像相互移动，尽管改变了onclick +“clickmove（3）”属性。
单击最后一个插槽后，程序将返回错误，并且不会移动图像，表示我无法移动到第三个插槽的x + 1以上。我尝试了各种方法来解决这个问题无济于事。
先感谢您
<html>
<script>
function clickMove(x)
{
var temp;
d = document.images
if (d[x].src)
{
temp = d[x].src
d[x].src = d[x + 1].src
d[x + 1].src = temp
}
}
function check(n)
{
//d = document.images[n].src
//alert(s+":"+d.length
//if (d.charAt(d.length == 1)
}
</script>
<head>
<title> Assignment 4 Kaltenbaugh </title>
</head>
<body background = "http://webclass.sru.edu/CPSC-217-01.0118/Kaltenbaugh%20Cain%20%20CXK1047/Assignment3/table1.png">
<table border = "0" cellspacing = "0" cellpadding = "0" align = "center">
<tr>
<td id = "t0"><img src = "http://webclass.sru.edu/CPSC-217-01.0118/Kaltenbaugh%20Cain%20%20CXK1047/Assignment4/treePic_04.jpg" onclick = "clickMove(0)"></td>
<td id = "t1"><img src = "http://webclass.sru.edu/CPSC-217-01.0118/Kaltenbaugh%20Cain%20%20CXK1047/Assignment4/treePic_03.jpg" onclick = "clickMove(1)"></td>
</tr>
<tr>
<td id = "t2"><img src = "http://webclass.sru.edu/CPSC-217-01.0118/Kaltenbaugh%20Cain%20%20CXK1047/Assignment4/treePic_02.jpg" onclick = "clickMove(3)"></td>
<td id = "t3"><img src = "http://webclass.sru.edu/CPSC-217-01.0118/Kaltenbaugh%20Cain%20%20CXK1047/Assignment4/treePic_01.jpg" onclick = "clickMove(2)"></td>
</tr>
</table>
</body>
</html>
当x为3时，x + 1为4，超出界限。当x为0,1或2时，x + 1为OK，您希望将图像3与图像0交换。
有很多方法可以做到这一点，其中一种方法是用x + 1取代(x + 1) % 4。
if (d[x].src)
{
temp = d[x].src
d[x].src = d[(x + 1) % 4].src
d[(x + 1) % 4].src = temp
}
编辑：我在上面的例子中假设你基本上想要x + 1，但你只需要修复环绕问题。至于顺时针问题，请按照这种方式考虑：
0 1
2 3
0应该与1交换，1应该与3交换，2应该与0交换，3应该与2交换。只需从这些关系中创建一个小表。
if (d[x].src)
{
var y = [1, 3, 0, 2][x];
temp = d[x].src;
d[x].src = d[y].src;
d[y].src = temp;
}