我正在尝试用 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);
});
最佳答案
images
数组中的值不正确。
参见 this关于如何使用背景图像的 url()
值的页面。一个值,例如 {{ 'slide1.jpg | asset_url }}
不会显示图像。也许您只需要 slide1.jpg
?
此外,请确保在分配变量时使用等号。在第二行,它应该是 var images = ...
。
关于javascript - 通过淡入/淡出 css 背景图像 url 的 JQuery 幻灯片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40325396/