javascript - 通过淡入/淡出 css 背景图像 url 的 JQuery 幻灯片

Question

我正在尝试用 JQuery 制作幻灯片。我有一个 div，它有一个 background-image:url() 作为 CSS。我现在正试图通过与其他人交换它来旋转这个背景图像，并用它制作幻灯片。

我尝试了一些方法，但由于某种原因它不起作用，我不确定为什么。

我也尝试过 CSS 关键帧，但是当幻灯片放映回到开头时它们并不是很完美，所以我不能使用它。

我正好有 6 张图片。

这是我的代码:

var image = $('#slide-1 .bcg'); //this is my div container with the background-color:image() in it's css
var images = ["{{ 'slide1.jpg' | asset_url }}","{{ 'slide2.jpg' | asset_url }}","{{ 'slide3.jpg' | asset_url }}","{{ 'slide4.jpg' | asset_url }}","{{ 'slide5.jpg' | asset_url }}","{{ 'slide6.jpg' | asset_url }}"];

image.fadeOut(1000, function () {
    image.css("background-image", "url("+images[0]+")");
    image.fadeIn(1000);
});

Answer 1

images 数组中的值不正确。

参见 this关于如何使用背景图像的 url() 值的页面。一个值，例如 {{ 'slide1.jpg | asset_url }} 不会显示图像。也许您只需要 slide1.jpg？

此外，请确保在分配变量时使用等号。在第二行，它应该是 var images = ...。