为什么不循环？

Question

I have written a javascript program that changes the picture on a header, waits, then shows the next one.

I have tried to make it loop round back to 1 when it reaches the last picture, but it's not working, the computer keeps crashing and I'm really stuck.

Later on it's going to have options to fade and have different transitions, but right now, I can't even get the function to loop forever without crashing the computer.

Can anyone offer a solution?

Thank you,

Andrew

var $initialDelay = 0; 
var $delay = 200;
var $picture = 1;
var $pictureAmount = 4;

function myFunction() {
    //first picture loaded in CSS
    //loop through pictures
    for (i=0;i<$pictureAmount;i++) {
        setTimeout(function(){  
            document.getElementById("header").style.backgroundImage = "url(img/slideshow/slideshow"+$picture+".jpg)";
            $picture++;
        }, $initialDelay);
        $initialDelay += $delay;
    }
}
myFunction();

Answer 1

Here is an example for looping over a 4 images with a timeout. I think you should be able to use this in your code to do what you want.

 const delayBetweenPictures = 1000, numberOfPictures = 4, initialPicture = 1, image = document.getElementById('slideshow'); function changeToPicture(pictureIndex) { console.log(`Changing picture to index ${pictureIndex}`); // Change the image image.src = `http://lorempixel.com/320/200/cats/${pictureIndex}`; // Use a modulo operator to turn 4 (number of pictures) back to 0 and add 1 so the range becomes 1...number of pictures. pictureIndex = (pictureIndex % numberOfPictures) + 1; // Set a timeout of X ms after which the changeToPicture method is called again, this time with the new value of pictureIndex. setTimeout((newIndex) => changeToPicture(newIndex), delayBetweenPictures, [pictureIndex]); } changeToPicture(initialPicture); 

 <img id="slideshow"> 

Answer 2

If you want this to continuously change picture every 200ms

var delay = 200;
var picture = 1;
var pictureAmount = 4;

function myFunction() {
    setTimeout(function() {
        document.getElementById("header").style.backgroundImage = "url(img/slideshow/slideshow" + picture + ".jpg)";
        picture = (picture % pictureAmount) + 1;
        myFunction();
    }, delay);
}
myFunction();

Answer 3

By using the modulo operation you can loop between the values 1 to 4 over and over.

It would be easier if your pictures were "0-indexed" :

for (i=0; /* infinite loop */; i=(i+1)%$pictureAmount) {
    // loops through 0, 1, ..., $pictureAmount - 1
}

but can be adjusted for a 1-indexed iteration :

for (i=1; /* infinite loop */; i=(i%$pictureAmount)+1) {
    // loops through 1, 2, ..., $pictureAmount
}

Example iteration over 1 to 9 :

 function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } async function loop() { for (i=1; /* infinite loop */; i=(i%9)+1) { document.getElementById("view").innerHTML=i; await sleep(1000); } } loop(); 

 <p id="view"></p>