0
Я пытаюсь сделать слайд-шоу в JQuery. У меня есть div, который имеет background-image:url() как CSS. Теперь я пытаюсь повернуть это фоновое изображение, заменив его на другие и сделав из него слайд-шоу.JQuery Слайд-шоу от fadein/fadeout css background-image url
Я попробовал что-то, но он почему-то не работает, и я не знаю, почему.
Я также пробовал ключевые кадры 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);
});
Почему вы не используете один из множества бесплатных плагинов, которые вы можете найти в Интернете? – EhsanT
Потому что я много искал, и ни один из найденных мной методов не использовал эту технику. Я не мог понять это, поэтому вместо этого я использовал ту же технику![]()
, которую используют большинство людей. Я все еще надеюсь, что кто-то придумает отличное решение для этого. :-) –
nTuply
ОК, так что две вещи: 1- Не [это] (http://slippry.com/examples/out-of-the-box/), чего вы пытаетесь достичь? 2- вы можете хотя бы сделать скрипку своего кода в [jsfiddle] (https://jsfiddle.net/), чтобы мы могли поработать над этим? – EhsanT