Затухание между зацикленными фоновыми изображениями с помощью jQuery

Question

Я пытаюсь получить фоновое изображение унаследованного div (под этим я подразумеваю, что у него уже есть фоновое изображение, которое я не могу контролировать и, следовательно, вынуждено сначала перезаписывать), чтобы плавно переходить между новыми изображениями на неопределенное время. Вот что у меня есть:

var images = [
 "/images/home/19041085158.jpg",
 "/images/home/19041085513.jpg",
 "/images/home/19041085612.jpg"
 ];

var counter = 0;
setInterval(function() {
$(".home_banner").css('backgroundImage', 'url("'+images[counter]+'")');
 counter++;
 if (counter == images.length) {
     counter = 0;
 }
}, 2000);

Проблема в том, что это не гладко (я стремлюсь к чему-то вроде плагина innerfade).

РЕДАКТИРОВАТЬ: вопрос изначально сказал "и это не неопределенно (он только один раз проходит через массив).", Но Марио исправил мою глупую ошибку именования.

РЕДАКТИРОВАТЬ 2: Я сейчас использую ответ Рейгеля (см. Ниже), который работает отлично, но я все еще не могу найти способ плавного перехода между изображениями.

Вся помощь с благодарностью:)

Answer 1

Предварительно загрузите изображения перед установкой backgroundImage, а также замените

if (counter == colours.length) {

с

if (counter == images.length) {

EDIT: Затухание между изображениями (обратите внимание, я не говорю о фоновых изображениях) выполняется с использованием двух изображений и изменением прозрачности, пока одно не станет невидимым, а другое нет. Это означает, что вам нужно, чтобы два изображения были видны одновременно на короткое время. Это невозможно, если вы просто используете одно фоновое изображение.

Вы можете попробовать удалить фоновое изображение на существующем div

$(".home_banner").css({'backgroundImage':''});

и размещение элементов img позади него (с использованием более низкого z-индекса) и постепенное их исчезновение. Вы могли бы даже использовать плагин innerfade на них и позволить ему справиться с замиранием и зацикливанием для вас.

Answer 2

После долгих экспериментов я вынужден ответить на свой вопрос отрицательно - то есть на данный момент я на 99% уверен, что это невозможно сделать.

Я должен сказать, что моя ситуация не идеальна в том смысле, что у div, для которого я пытаюсь скрыть фон, есть другой контент html. Если этого не произойдет, то комбинация кода Рейгеля и последнего предложения Марио наверняка сработает, а именно:

• После кода Рейгеля
• Удалите фон из старого элемента.
• Вставить новый div с более низким индексом z.
• Добавьте изображения на передний план этого нового раздела.
• Переходите с помощью библиотеки по вашему выбору.

Хотя было бы проще использовать jQuery для удаления устаревшего фона div и затем вставлять изображения в div 'foreground'.

В любом случае, просто оставьте это на тот случай, если кто-то другой попытается сделать то же самое. Плюс я ненавижу вопросы без ответа:)

Answer 3

var bgrotate = function(imgpool, tg){
    var imgs        = imgpool,
        loader      = new Image(),
        domelements = new Array(),
        current     = 0,
        target      = tg;

    return {
        preload: function(){
           for(var i=0; i<imgs.length; i++){
               loader = new Image();

               loader.src = 'url("' + imgs[i] + '")';
               alert(loader);
               domelements.push(loader);                   
           }
        },
        rotate: function(speed){
           tg.delay(speed).show(1, function(){
              tg.css('backgroundImage', domelements[current].src);
              current = (current < domelement.lenght ? current++ : 0);
           }
        },
        stop: function(){
              tg.stop(true, false);
        }
    }
}



      $(document).ready(function(){
           var myobj = new bgrotate(['http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif', 'http://sstatic.net/so/img/logo.png'], $('#mydiv'));

           myobj.preload();
           myobj.rotate();
      }

myobj.stop() завершает цикл. Это не проверено, но что-то похожее на это должно работать.

Answer 4

попробуйте это ...

var images = [
    "/images/home/19041085158.jpg",
    "/images/home/19041085513.jpg",
    "/images/home/19041085612.jpg"
    ];

var counter = 0;
setInterval(function() {
$(".home_banner").css('backgroundImage', 'url("'+images[counter]+'")');
    $('<img>').attr('src',images[++counter]); // preload the next image
    if (counter == images.length) {
        counter = 0;
    }
}, 2000);

Answer 5

Вам нужно сначала загрузить изображение, а затем переключиться на него

jQuery исчезает в новом изображении: jQuery исчезает в новом изображении

Answer 6

Просто вставьте -webkit-transition:1s; в свой CSS для класса, в котором вы меняете фон.

Это прекрасно сработало для меня.