如何在JavaScript中制作背景数组

Question

I am trying to make an array of images so that my full page background can switch between the images in my array I have the Id on my html tag the image is being applied via CSS and I want the image to cycle through my array of images.

The code I have so far. Right my code change my whole page to the string of the location of the files for the images I want the background image to change not have my whole page turn white with some text at the top.

any help would be great.

 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

You are setting innerHTML which does replace the content of the page. If you want to change the background, use the style object on the element:

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

You are basically creating a CSS rule, just as you would in a stylesheet, but building it in the string instead.

Answer 2

Use

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

instead of

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