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

Сегодня сделаем так что бы бекграунд еще и с эффектом затухания слайдилась
function backgroundScale()
{
var imageRatio = 1.75;
var windowHeight = document.body.clientHeight;
var windowWidth = document.body.clientWidth;
var windowScale = windowWidth / windowHeight;
var targetWidth = windowHeight * imageRatio;
var targetWidthFull = windowWidth;
var leftPos = - (targetWidth - windowWidth) / 2;
var leftPosFull = 0;
if (windowScale <= imageRatio)
{
$('#rotator img').attr("width", targetWidth);
$('#rotator').css("left", leftPos);
}
else
{
$('#rotator img').attr("width", targetWidthFull);
$('#rotator').css("left", leftPosFull);
}
}
$(window).resize(function()
{
var imageRatio = 1.75;
var windowHeight = document.body.clientHeight;
var windowWidth = document.body.clientWidth;
var windowScale = windowWidth / windowHeight;
var targetWidth = windowHeight * imageRatio;
var targetWidthFull = windowWidth;
var leftPos = - (targetWidth - windowWidth) / 2;
var leftPosFull = 0;
if (windowScale <= imageRatio)
{
$('#rotator img').attr("width", targetWidth);
$('#rotator').css("left", leftPos);
}
else
{
$('#rotator img').attr("width", targetWidthFull);
$('#rotator').css("left", leftPosFull);
}
mainBaseResize();
});
$(document).ready(function(){
//$('body').css({background: #fff});
backgroundScale();
theRotator();
});
А теперь в скрипт добавляем эти функции
function theRotator() {
$('#rotator img').css({opacity: 0.0});
$('#rotator img:first').css({opacity: 1.0});
setInterval('rotate()',7000);
}
function rotate() {
// Берем первую картинку
var current = ($('#rotator img.show')? $('#rotator img.show') : $('#rotator img:first'));
// Берем следующую картинку, когда дойдем до последней начинаем с начала
var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('#rotator img:first') :current.next()) : $('#rotator img:first'));
// Рандом
var sibs = current.siblings();
var rndNum = Math.floor(Math.random() * sibs.length );
var next = $( sibs[ rndNum ] );
// Подключаем эффект растворения/затухания для показа картинок, css-класс show имеет больший z-index
next.css({opacity: 0.0})
.addClass('show')
.animate({opacity: 1.0}, 1000);
// Прячем текущую картинку
current.animate({opacity: 0.0}, 1000)
.removeClass('show');
};
СМОТРЕТЬ РЕЗУЛЬТАТ (Каждые 7 секунд смена бекграунда)
Юра Бутырин
22.01.2011 at 01:48Привет Игорь:) Как всегда в закладки:)
А какого размера в пикселях должна быть картинка?
utz0r2
22.01.2011 at 12:16Привет Юра
Любого размера она растягивается пропорционально на ширину и высоту браузера (но логично, что чем больше тем качественней изображение будет)
Миша
21.02.2011 at 23:12Здравствуйте, возможно вопрос покажется глупым, но где в скрипте прописовать ссилки на картинки и куда их пихать?)
utz0r2
21.02.2011 at 23:21Миша, в данном примере скрипт берет массив изображений из id rotator
html
<img src="img/1.jpg" alt="pic1" class="show" width="100%" />
<img src="img/2.jpg" alt="pic2" width="100%" />
<img src="img/3.jpg" alt="pic3" width="100%" />
</div>
Миша
21.02.2011 at 23:48Помогите пожалуйста, осуществить скрипт на DLE 9.2. Очень прошу.
Sergei
25.01.2012 at 13:37Классный скрипт! А можно ли поставить контролы к картинкам? Что-то типа http://ruseller.com/lessons/les574/example/index.html То есть переключение БГ по клику по кнопкам как в слайдере и возможностью поставить паузу еще один пример -http://www.egrappler.com/contents/backgroundslider/demo/slider.htm ?
utz0r2
25.01.2012 at 16:22Можно, но делать не буду, ибо нет времени -)