Stuck in a slideshow whats wrong in my code

[hindrikounpuu]

The slides does’t circulate and the text doesn’t do that either

<script>
function runSlideshow() {

    let intervalId = setInterval(function () {

        //Alla bilderna

        let slideshowImages = document.querySelectorAll("#slideshow img");

        //Sista bilden

        let lastImage = slideshowImages[slideshowImages.length - 1];

        console.log("Tona ut bilden", lastImage);

        let opacity = 1;

        let fadeOutId = setInterval(function () {

            lastImage.style.opacity = opacity;

            if (opacity > 0) {

                opacity -= 0.01;

            } else {

                clearInterval(fadeOutId);

                opacity = 1;

            }

        }, 1000 / 60);

    }, 5000);

    return intervalId;

    function FadeOut(moveImage) {

        image.style

    }

};

runSlideshow();

runFadeout();

runMoveImage();

function moveImage(image) {

    image.remove();

    slideshow.prepend(image);

};</script>

[Martyr2]

As far as I remember, changing an image’s opacity doesn’t mean that the image is taken out of the document. So each time you go to select all #slideshow img it is still selecting all images and so is the same set each time. Meaning that lastImage is always the same image and no where are you going to the next image.

I would suggest you first select all images outside of the setInterval function. Then have the code look at each image in turn. Right now you keep selecting all images on each iteration of the timer which is inefficient.

Once you have the collection of images, setup a counter/pointer that will be used to index slideshowImages array. You want something along the following steps…

1. Set counter to zero to look at first image.
2. Fade that image out and then perhaps just plain hide it.
3. Increment your counter
4. Look at the next image in the list and show that. Then repeat from step 2 until end of list.
5. When you are at the end of the list, set counter back to zero and reshow image.

But again right now you are grabbing all images, including the image you faded out, so lastImage will always be the last image.

I hope you get what I am saying.

[PaulOB]

@Martyr2

and no where are you going to the next image.

I believe the moveImage(image) function (had it been set up properly) was the OPs attempt to take the last image (which was the one being faded out) and then remove the image and prepend it at the beginning of the list.

If it was set up properly it would have worked (after a fashion) but the problem with that approach is that you would need to get a new collection each time as the slideshowImages variable would not point to the current structure of the html.

As an example I believe this was roughly what the OP was attempting.

(Note: do not use the above example as it is only for explanation).

However there is also an issue with setInterval continually running when the tab is inactive so setTimeout would be better and of course grabbing the collection each time you move the image is inefficient and much better to use a counter instead as you mentioned.

Something roughly like this: