标语图片的Javascript递归功能

Question

I trying to create a rotating banner for cycle a few images.

const images = [url1, url2 url3]
const rotate = (url) => {
    document.getElementById('banner').style.background = url
    rotate(next)
}

Url's are correct full paths only shortened here in question. I'm striggl ing to solve how to get next in code above. This is some code I write from looking at examples. Im not a js programmer only recently started. Thank you for helping.

Answer 1

Here's one approach:

const rotate = (element, delay, urls) => {
    let current = 0;
    (function next() {
        element.style.background = url[current]; // set image
        current = (current + 1) % urls.length;   // update for next pass
        setTimeout(next, delay);                 // recycle
    })();                                        // start immediately
};

with usage:

rotate(document.getElementById('banner'), 5000, [url1, url2, url3]);

The modulo arithmetic resets current to zero after the last image has been shown.