javascript - 全身背景的定时背景变化

Question

我正在尝试更改队列背景。这就是我必须更改背景的内容:

var bgarray = new Array();
var curbg = 0;

function getBackgrounds() {
    var totalbg = 4;

    for (var i = 0; i < totalbg; i++) {
        bgarray[i] = 'url("img/' + i + '.jpeg")';
    }
}

function changeBackground() {
    debugger;

    if (curbg === (bgarray.length - 1)) {
        curbg = 0;
    }

    var bgurl = bgarray[curbg];
    curbg++;

    $(document.body).animate({
        'background-image': bgurl
    }, 1000);
}

我在调用代码中使用了 setInterval(changeBackground, 5000);，但它不会更改背景。

控制台没有记录任何错误，并且文件确实存在。

知道为什么没有变化吗？

Answer 1

var bgarray = ['https://2.bp.blogspot.com/-AXkkbmFRErs/TjCZIWGawfI/AAAAAAAAAlk/lT8yTGBYh38/s1600/Rick-Roll3.png','http://cdn.hitfix.com/photos/5203303/Rick-Roll-Mash-Up.jpg','http://stream1.gifsoup.com/view2/1569461/rick-roll-o.gif','https://media4.giphy.com/media/lKm3FhZ6xMkFO/200_s.gif'];
var curbg = 0;

function changeBackground() {
    curbg++;
    if (curbg === (bgarray.length)) {
        curbg = 0;
    }
    var bgurl = bgarray[curbg];
    $(document.body).css('background-image','url("'+bgurl+'")');
}

setInterval(changeBackground,4000);

body {
  transition: background-image 1s;
  background-size: cover;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

这就是您想要实现的目标吗？