Есть див с минимальной шириной 960 и максимальной 1920px. Как можно сделать плавную смену (слайд-шоу) фона у DIV-блока? Нужна именно смена фона, так как при использовании изображений в диве шириной 1920px будет появляться горизонтальная полоса прокрутки.
Необходим блок, который будет подменять текущий фон. Алгоритм будет примерно следующий: получаете текущее значение фона вашего блока, устанавливаете это значение заранее скрытому блоку и показываете его (таким образом пользователь не замечает, что произошла подмена). Далее вашему диву устанавливаете следующее значение фона, например, из массива. А затем просто скрываете временный баннер, например, с помощью fadeOut и меняете значение текущего фона, которое вы потом опять установите в виде фона. В коде это будет выглядеть как-то так:
var firstBanner = $('.hidden_banners img:first'),
currentBanner = firstBanner.next();
function changeBanner() {
var currentBackground = $('.banners').css('background-image');
$('.banners-tmp').css('background-image', currentBackground).show();
$('.banners').css('background-image', 'url(' + currentBanner.attr('src') + ')');
$('.banners-tmp').fadeOut(800, function() {
currentBanner = (currentBanner.next().length > 0) ? currentBanner.next() : firstBanner;
});
}
if ($('.hidden_banners img').length > 1) {
window.setInterval(changeBanner, 5000);
}