Question

我对javascript很新，并试图用4张图片做一些基本的事情。我试图让所有人向右移动，最后一个向前移动。有人能告诉我，我是否朝着正确的方向前进？任何帮助表示赞赏。谢谢。

<html>


<head>
<title>Onclick Assignment</title>

<script type="text/javascript">

var moveButton = document.getElementByID("button");
moveButton.onclick = function moveImagesRight()
{
 var img1Src = document.getElementById("img1").src;
 var img2Src = document.getElementById("img2").src;
 var img3Src = document.getElementById("img3").src;
 var img4Src = document.getElementById("img4").src;

 document.getElementById("img1") = img2Src;
 document.getElementById("img2") = img3Src;
 document.getElementById("img3") = img4Src;
 document.getElementById("img4") = img1Src;

}

</script>
</head>

<body>

<table>
<tr>
    <td style="text-align: center;">Image 1</td>
    <td style="text-align: center;">Image 2</td>
    <td style="text-align: center;">Image 3</td>
    <td style="text-align: center;">Image 4</td>
</tr>

<tr>
    <td style="height: 200px;"><img id="img1" src="images/clover.jpg" width="200px"/></td>
    <td style="height: 200px;"><img id="img2" src="images/gold.jpg" width="200px"/></td>
    <td style="height: 200px;"><img id="img3" src="images/hat.jpg" width="200px"/></td>
    <td style="height: 200px;"><img id="img4" src="images/leprechaun.jpg" width="200px"/></td>
</tr>

<tr>
<td>
<form>
    <input type="button" value="Move Images..." id="button" onclick="moveImagesRight();"/>
</form>
</td>
</tr>

Answer 1

我想我明白你要做什么。看来你想切换每个img的src。

function switchSrcs(){
    var cells = document.getElementsByTagName("td"); // selects all cells!
    var finalSrc = cells[cells.length-1].firstChild.src; //get the src of the final image 
    for (var i = cells.length; i > 0; i--){ //this iterates backwards
        cells[i-1].firstChild.src = i != 1 ? cells[i-2].firstChild.src : finalSrc;
    };
};

for循环中的一行是一个精简的if语句，用于检查我们是否在第一个元素（由于我们向后迭代而最后会发生这种情况）。

为tr设置id然后为该特定id选择所有子单元格（td）将是有益的。

如何使用javascript向右移动图片

1 个答案: