Javascript函数不会读取DOM变量

Question

我编写了一个小脚本，该脚本在要构建的网站的各种背景图像之间循环。这是通过每9秒将document.body.style.backgroundImage更改为不同图像的功能来实现的。我设法使脚本正常工作，但没有达到我最初的意图。最初，我尝试将document.body.style.backgroundImage存储到名为bgImage的var中，然后将bgImage设置为图像数组的当前索引。由于某种原因，这拒绝工作，我不知道为什么。但是，当我用document.body.style.backgroundImage替换bgImage时，一切正常。我对编程还是很陌生，所以如果有人可以解释这里发生的事情，将不胜感激。

var bgImage = document.body.style.backgroundImage;
var images = [
    'url(../photos/pancake.jpg)',
    'url(../photos/waffles.jpg)',
    'url(../photos/eggs.jpg)',
    'url(../photos/sandwich.jpg)'
]
var counter = 0;

function changeBg() {
    // when bgImage is replaced with > document.body.style.backgroundImage
    // the function works.
    bgImage = images[counter];
    counter++;
    if (counter === images.length) {
        counter = 0;
    }
}
setInterval(changeBg, 9000);

在将变量设置为bgImage的情况下执行该函数时，下一个图像将永远不会显示。