横幅图片的Javascript递归函数

时间:2018-01-26 13:13:39

标签: javascript html

我试图创建一个旋转横幅来循环一些图像。

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

Url的正确完整路径仅在此处缩短。我正在努力解决如何在上面的代码中获得下一个代码。这是我通过查看示例编写的一些代码。我不是最近才开始的js程序员。谢谢你的帮助。

1 个答案:

答案 0 :(得分:1)

这是一种方法:

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

用法:

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

模数算术在显示最后一个图像后将current重置为零。