Как перемещать фотографии вправо с помощью javascript

-3

Я очень новичок в javascript и пытаюсь сделать что-то основное с 4 изображениями. Я пытаюсь заставить всех двигаться вправо, а тот, который находится на конце, перемещается на фронт. Может ли кто-нибудь сказать мне, если я возглавляю в правильном направлении? Любая помощь приветствуется. Спасибо.Как перемещать фотографии вправо с помощью javascript

<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>

источник

2015-03-13 Vaviwon

работает ли это при запуске? – Claies

Я думаю, я понимаю, что вы пытаетесь сделать. Кажется, вы хотите переключить src каждого img.

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; 
    }; 
};

Линия в цикле является конденсируется, если оператор проверки того, что мы не на первый элемент (который будет происходить в прошлом, потому что мы перебор в обратном направлении).

Было бы полезно установить идентификатор для tr и затем выбрать все дочерние элементы (td) для этого конкретного идентификатора.

источник

2015-03-13 02:30:25

Спасибо фальшивым! Это очень помогло. – Vaviwon

Как перемещать фотографии вправо с помощью javascript

ответ

Смежные вопросы