通过FadeIn / Fadeout CSS背景图像URL的jQuery幻灯片显示

Question

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

我尝试了一些东西，但是由于某种原因它无法正常工作，我不确定为什么。

我还尝试了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数组中的值不正确。

有关如何使用背景图片的url()值，请参见此页面。 诸如{{ 'slide1.jpg | asset_url }} {{ 'slide1.jpg | asset_url }}将不会显示图像。 也许您只需要slide1.jpg代替？

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