Изображения в полной ширине и исчезают, когда исчезают

Question

Я пытаюсь создать сценарий с помощью JQUERY, который меняет фоновые изображения каждые 5 секунд. Проблема в том, что я не могу получить изображения в полноэкранном режиме. Другая проблема, с которой я сталкиваюсь, заключается в том, что одно изображение исчезает, так что другое изображение может исчезать, но между ними есть пробел. Есть ли способ начать постепенное исчезновение в то же время, что и постепенное исчезновение?

$(window).load(function() {   
    var i = 0; 
    var images = ['geral2.jpg','geral3.jpg','geral4.jpg','geral5.jpg','geral6.jpg']; 
    var image = $('#slideit'); 
    image.css('background', 'url(geral1.jpg) no-repeat center center fixed'); 
    setInterval(function(){   
    image.fadeOut(1000, function() { 
     image.css('background', 'url(' + images [i++] +') no-repeat center center fixed'); 
     image.fadeIn(1000); 
    }); 
    if(i == images.length) 
     i = 0; 
    }, 5000); 
}); 

http://codepen.io/Ryuh/pen/dXYzoM

Answer 1

Смотрите этот ресурс: https://vegas.jaysalvat.com/ Это фон ползунок, который тянется (будь то ширина или длина) на весь экран и имеет точно выцветанию эффект, который вы ищете.

доступа все настройки вы хотите изменить/изменить здесь: http://vegas.jaysalvat.com/documentation/settings/

Простота установки и выглядит великолепно, когда она есть. Весь код доступен для загрузки.

код будет выглядеть так просто, как:

$elmt.vegas({ 
    slides: [ 
     { src: '/img/slide1.jpg' }, 
     { src: '/img/slide2.jpg' }, 
     { src: '/img/slide3.jpg' } 
    ], 
    transition: 'fade' 
}); 

Только в случае, если какие-либо ссылки выше гнили, вы всегда можете вилка/скачать с GitHub по этой ссылке: https://github.com/jaysalvat/vegas/