背景图片更换间隔 Javascript

Question

我是 javascript 的新手，我需要一些帮助来实现我正在尝试实现的功能运行。我希望 body 的背景使用提供的图像每秒更改一次，但是当我尝试运行脚本时，它似乎不起作用。

Javascript:

var i = 0;
var images = [
URL('file:///Users/BodyDesigns/Documents/Altered%20Images/P1010216.jpg'),
URL('file:///Users/BodyDesigns/Documents/Altered%20Images/P1010217.jpg'),
URL('file:///Users/BodyDesigns/Documents/Altered%20Images/P1010200.jpg')
];

function backgroundChanger() {
for(; i < images.length; i++) {
    document.getElementById('background').style.backgroundImage.innerHTML = images[i];
}
}

setInterval( backgroundChanger(), 4000);

html:

<body id="background" onLoad="backgroundChanger()">

Answer 1

这应该可以解决问题。

var i = 0;
var images = [
    'https://upload.wikimedia.org/wikipedia/commons/2/23/Screenshot_from_IMAX%C2%AE_3D_movie_Hidden_Universe_showing_the_Helix_Nebula_in_infrared.jpg',
    'http://ichef.bbci.co.uk/wwfeatures/wm/live/1280_640/images/live/p0/40/m0/p040m0bc.jpg',
    'http://az616578.vo.msecnd.net/files/2016/08/06/636060577940287734-194579614_maxresdefault.jpg'
];

function backgroundChanger() {
  if(i >= images.length){
    i = 0;
  }
  document.getElementById('background').style.backgroundImage = 'url(' + images[i++] + ')';
}

setInterval( backgroundChanger, 4000);

如您所见，url() 应该在字符串中传递才能起作用。 backgroundImage 属性.

上没有 innerHtml

背景图片更换间隔 Javascript

Background image changer interval Javascript

html

javascript

interactive

intervals