Question

在光滑的滑块中循环播放背景图像时出现问题。请参见下面的代码。

var json = [
  { "img_url": "https://via.placeholder.com/500x500?text=1" },
  { "img_url": "https://via.placeholder.com/500x500?text=2" },
  { "img_url": "https://via.placeholder.com/500x500?text=3" }
];

$.each(json, function () {
  var image = this["img_url"];
  console.log(image);
  $("#test").append(
    "<div class='slideBG'><img src=" + image + "></div>"
  );
}); // each ENDS

// initialize the slick slider
$("#test").slick({
  autoplay: true,
  autoplaySpeed: 5000,
  dots: false,
  arrows: false,
  infinite: true,
  fade: true
});

如果我附加img标签，则上述代码可以正常工作。但是如果我尝试...

$(".slideBG").css("background", "url('" + image + "')");

它仅将最后一张图像显示为背景，而不会循环播放其他图像。我想要实现的目的是从JSON获取图像URL并将其用作背景滑块。如果有人可以帮助我，我将不胜感激。

Answer 1

弄清楚了。将背景样式属性直接添加到div附件中，如下所示。

 <div style="background:url(' + image + ')" class="slideBG"></div>

带有jQuery each（）的光滑滑块背景图像循环

1 个答案: