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

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

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

Сегодня сделаем так что бы бекграунд еще и с эффектом затухания слайдилась

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 секунд смена бекграунда)

0 comments
  1. Юра Бутырин
    Юра Бутырин
    22.01.2011 at 01:48

    Привет Игорь:) Как всегда в закладки:)

    А какого размера в пикселях должна быть картинка?

    Reply
  2. utz0r2
    utz0r2
    22.01.2011 at 12:16

    Привет Юра
    Любого размера она растягивается пропорционально на ширину и высоту браузера (но логично, что чем больше тем качественней изображение будет)

    Reply
  3. Миша
    Миша
    21.02.2011 at 23:12

    Здравствуйте, возможно вопрос покажется глупым, но где в скрипте прописовать ссилки на картинки и куда их пихать?)

    Reply
  4. utz0r2
    utz0r2
    21.02.2011 at 23:21

    Миша, в данном примере скрипт берет массив изображений из id rotator
    html

    <div id="rotator">
        <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>

    Reply
  5. Миша
    Миша
    21.02.2011 at 23:48

    Помогите пожалуйста, осуществить скрипт на DLE 9.2. Очень прошу.

    Reply
  6. Sergei
    Sergei
    25.01.2012 at 13:37

    Классный скрипт! А можно ли поставить контролы к картинкам? Что-то типа http://ruseller.com/lessons/les574/example/index.html То есть переключение БГ по клику по кнопкам как в слайдере и возможностью поставить паузу еще один пример -http://www.egrappler.com/contents/backgroundslider/demo/slider.htm ?

    Reply
  7. utz0r2
    utz0r2
    25.01.2012 at 16:22

    Можно, но делать не буду, ибо нет времени -)

    Reply
Оставить комментарий

Ваш электронный адрес не будет опубликован. Обязательные поля помечены *

Scroll Up