Javascript 在一个数据属性内设置背景图像动画

我尝试在这些背景图像URL之间创建一个很好的动画，这些URL位于一个数据属性中，第一个图像立即加载，5秒钟后加载下一个图像，下一个等。在最后一个图像之后，它从头开始

<div data-images="/media/jtjglhbb/main-bg-01.jpg,/media/u2bitolk/main-bg-02.jpg,/media/iasbuo5n/main-bg-04.jpg,/media/f00jm2va/main-bg-03.jpg,"></div>

var $dataImages = $('[data-images]');
var imagesList = $dataImages.data('images').split(',');

$.each(imagesList, function (index, value) {
    setTimeout(function () {
        $dataImages.stop().animate({ opacity: 0 }, 1000, function () {
            $(this).css({ 'background-image': 'url(' + imagesList[index] + ')' })
                .animate({ opacity: 1 }, { duration: 1000 });
        });
    }, 5000);
});

但它并没有设置第一个映像，它只在5秒后启动，并没有以5秒的延迟逐个运行

---

显然，逻辑是错误的，一些帮助会很好。

尝试下面的方法。它应该会起作用

图像计数将需要获得模式值才能重新开始。 索引将保存要在背景中显示的图像索引 changeImage函数将从内部递归调用，因此它将持续更新背景。 使用索引=索引+1%图像计数；所以索引将从最后一个索引的0开始。 var$dataImages=$'[dataImages]'； var imagesList=$dataImages.data'images.split'，'； //图像计数将需要获得模式值才能重新开始。 var imageCount=imagesList.length-1； //要在背景中显示的图像索引 var指数=0； //函数将从内部递归调用，因此它将不断更新背景。 函数变换图像{ $dataImages.stop.animate{ 不透明度：0 }，1000，功能{ $this.css{ “背景图像”：“url”+图像列表[索引]+ } .制作动画{ 不透明度：1 }, { 持续时间：1000 }; }; //将索引更新到下一个图像url 索引=索引+1%图像计数； //声明在所需时间后调用函数的超时 setTimeoutchangeImage，5000； } 改变形象；

---

当然，这一切都是同时运行的——setTimeout不是“睡眠”或其他任何东西。您正在循环x个数组元素，并在五秒钟后为所有这些元素添加一些操作。一个简单的方法是使用5000*index+1作为延迟。如果使用5000*index+1，第一个图像将在5秒钟后设置，请改用5000*index。