Please Need Help

i have a five pictures side by side four of them x and one y i need to move y every 2 seconds like that [x,x,x,x,y][y,x,x,x,x][x,yx,x,x][x,x,yx,x,][x,x,x,yx,]and so on how i can i do thay

inside a loop that iterates over the elements swap an x element with a y element every two seconds
The problem sort of answers itself when it is left that broad
Is there a specific part that is troubling you?

This looks like school assignment. Is that what it is?

:joy: :joy: some thing like that

i tried to swap x by y every 2 second make swap x to y and finly i got five y’s

Then show us what you have and why you need help with it that you cannot get from your teacher or classmates.

it’s self study task > Blockquote

So this is what you would call ‘self study’, then, is it?

i tried over my mind

Give it another day and show us what you have tomorrow. We will not do your assignment (or studying) for you.

if I Want to get the solution explicity i can show my code here and ask for the wrong but i did’t cause of i want to get a just little hint

May we take it that this is JavaScript in an HTML page?

yes it with javascript

So can you suggest what your approach may be?

i make an interval that every 2 seconds change the x to y and make another one in the same interval to change the y to x by to variable like i and j concept in for loop but i dosen’t work

Show us your HTML and your script, please.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div {
            margin: 400px;
        }
    </style>
</head>

<body>
    <div id="container" onmouseover="movePic()" class="div">
        <img src="marble1.jpg" alt="">
        <img src="marble1.jpg" alt="">
        <img src="marble1.jpg" alt="">
        <img src="marble1.jpg" alt="">

    </div>
    <script> var img = document.querySelectorAll('img');
        var el = 0;
        var el2 = 0;
        function movePic() {
          setInterval(() => {
            img[el].src = 'marble3.jpg';
            el++;
            if (el > 0) {
              img[el2].src = 'marble1.jpg';
              el2++;
            }
            if (el >= img.length) {
              el = 0;
            }
            if (el2 >= img.length) {
              el2 = 0;
            }
          }, 1000);
        }
        </script>

</body>

</html>

Shouldn’t one the images in the page be marble3.jpg in the set up?

yes i could be in the set up

So you have say five frames, one of them different and all you want to do is have the different one shift to the right on each interval. Every second is pretty fast, but that’s secondary.

In your loop you have two elements in focus.

temp = el1.src
el1.src = el2.src
el2.src = el1.src

The control in the loop is the indices from 0 to 4. This will need to be controlled.

1 Like