Question

我正在尝试在JQuery中制作幻灯片。我有一个以background-image:url()为CSS的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数组中的值不正确。

请参阅this页面，了解如何使用背景图片的url()值。 {{ 'slide1.jpg | asset_url }}之类的值不会显示图像。也许您只想要slide1.jpg？

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

由fadein / fadeout css background-image url进行的JQuery幻灯片放映

1 个答案: