你如何在JavaScript中制作背景数组

Question

我正在尝试制作一个图像数组，以便我的整页背景可以在我的数组中的图像之间切换我在我的html标记上的Id通过CSS应用图像我希望图像循环通过我的图像阵列。

到目前为止我的代码。正确的我的代码将我的整个页面更改为我想要更改背景图像的图像文件位置的字符串，而不是让我的整个页面变成白色，顶部有一些文本。

任何帮助都会很棒。

var backgroundArray = ["../images/video.jpg", "../images/stars2.jpg", "../images/junkyard.jpg"];
var bgIndex = 0;

function changeBackground(){
	var newBg = backgroundArray[bgIndex];
	var mainBg = document.getElementById('html');
	mainBg.innerHTML = newBg;
	bgIndex++;
	if (bgIndex > backgroundArray.length-1){
	bgIndex = 0;
	} 
}

html
	background: url(../images/video.jpg) no-repeat 0 top fixed;
	background-size: cover;

doctype
html(lang="en" id="html")
	head

Answer 1

您正在设置innerHTML，它会替换页面内容。如果要更改背景，请使用元素上的style对象：

mainBg.style.backgroundImage = 'url(' + newBg + ')';

您基本上是在创建CSS规则，就像在样式表中一样，但是在字符串中构建它。

Answer 2

使用

document.body.style.backgroundImage = "url('" + newBg + "')"

而不是

var mainBg = document.getElementById('html');
    mainBg.innerHTML = newBg;