javascript - 如何使用 javascript 创建循环 html 更改背景图像

Question

我的 JavaScript 脚本旨在不断更改 HTML 页面的背景图像，但它不会执行其预期的操作。

function CB() {
try {
    var p = {
      Pic1: 'Images/CoolPic2.jpg',
      Pic2: 'Images/CoolPic3.jpg',
      Pic3: 'Images/CoolPic4.jpg'
   };
   var l = p.length;
    i = 0;
    while (i < l) {
        setTimeout(function(){document.body.style.backgroundImage = url(p[i]); }, 3000)
        i += 1;
        if (i > l) {
            i -= l;
            }
    }
}
catch(err) {
    alert(err.message);
}
}

Answer 1

你不需要 while 循环。只需使用 setInterval (这将每 3 秒调用该函数)而不是 setTimeout (这将调用一次)。试试这个

function CB() {
    try {
        var p = [
            'Images/CoolPic2.jpg',
            'Images/CoolPic3.jpg',
            'Images/CoolPic4.jpg'
        ];

        var counter = 0;

        setInterval(function(){
            //document.body.style.backgroundImage = url(p[counter++]);
            console.log(counter++);

            if(counter == 3){
                counter = 0;
            }
        }, 3000)
    } catch(err) {
        alert(err.message);
    }
}

CB();