在一个数据属性中对背景图片进行动画处理

Question

我试图在这些背景图片的URLs之间创建一个漂亮的动画，它们是活在一个数据属性中的（第一张图片立即加载，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秒后才开始运行。

很明显逻辑是错误的，如果能得到一些帮助就更好了。

Answer 1

尝试像下面。它应该工作。

1. image count 将需要获取模式值，以便从头开始。
2. index 将保存要在背景中显示的图像的索引
3. changeImage 函数将从内部递归调用，因此它将持续更新后台。
4. 使用 index = (index + 1) % imageCount; 所以索引将从上一个索引开始从0开始。

var $dataImages = $('[data-images]');
var imagesList = $dataImages.data('images').split(',');
// image count will required to get mode value to start from beginning again.
var imageCount = imagesList.length - 1;
// index of image to show in background
var index = 0;

// function will be called recursively from inside so it will continuously update background.
function changeImage() {

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

  // update index to next image url
  index = (index + 1) % imageCount;

  // declare timeout to call function after required time
  setTimeout(changeImage, 5000);
}

changeImage();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

<div style="height: 150px;" data-images="https://www.w3schools.com/howto/img_nature_wide.jpg,https://www.w3schools.com/howto/img_snow_wide.jpg,https://www.w3schools.com/howto/img_lights_wide.jpg,https://www.w3schools.com/howto/img_mountains_wide.jpg"></div>