Question

我正在努力改变背景。所以我想要做的是使用SetInterval来改变我的背景，但每当它改变时，它会留下一个白色的背景然后转向我想要的图像。有关如何修复它的任何建议吗？

我的代码：

var image = new Array();
image.push("url('./1.png')");
image.push("url('./2.png')");
image.push("url('./3.png')");
image.push("url('./4.png')");
image.push("url('./5.png')");

var imagenum = 0;

function changeBackground () {
    imagenum++;
    if (imagenum==5) {
         imagenum = 0;
    }
    document.getElementById("bodydiv").style.backgroundImage = image[imagenum];
}

function init () {
     setInterval(function () {changeBackground()},1000);
}

奖励：如果我将setInterval设置得低一点，我将拥有整个空白站点。由于代码，它完美地工作，但闪光灯真的让我很恼火。任何人都可以帮我吗？

Answer 1

我将init()函数放在preloadImages()中，因为它会强制init()仅在预加载所有图像时运行。但是还有其他方法可以做到这一点。

var images = new Array();

function preloadImages() {
    i=1
    foreach(preloadImages.arguments as img)
        images[i] = new Image()
        images[i].src = img
        i++
    }
    init()
}

function changeBackground () {
    imagenum++;
    if (imagenum==5) {
        imagenum = 0;
    }
    document.getElementById("bodydiv").style.backgroundImage = image[imagenum];
}

function init () {
     setInterval(function () {changeBackground()},1000);
}

var image = [
    './1.png',
    './2.png',
    './3.png',
    './4.png',
    './5.png'
]

preloadImages(image);

用循环更改背景而不闪烁

1 个答案: