Kredov long

Слайдер с смещением фона на jQuery

Тема в разделе "JavaScript", создана пользователем marsrip, 29 мар 2013.

  1. marsrip

    marsrip

    Регистрация:
    13 мар 2013
    Сообщения:
    116
    Симпатии:
    55
    [​IMG]





    Очень красивый слайдер с эффектом смещения фона при смене слайда (картинки). Слайдер плавно сменяет картинку, в навигации есть кнопки – назад, вперед и красиво размещенные превюшки картинок.

    HTML скрипта
    Для начала давайте посмотрим на html скрипта, для наглядности я его сократил и показал – 2-е превю и две больших картинки:
    <div id="pxs_container" class="pxs_container">
    <div class="pxs_bg">
    <div class="pxs_bg1"></div>
    <div class="pxs_bg2"></div>
    <div class="pxs_bg3"></div>
    </div>
    <div class="pxs_loading">Loading images...</div>
    <div class="pxs_slider_wrapper">
    <ul class="pxs_slider">
    <li><img src="images/1.jpg" alt="First Image" /></li>
    <li><img src="images/2.jpg" alt="Second Image" /></li>
    </ul>
    <div class="pxs_navigation">
    <span class="pxs_next"></span>
    <span class="pxs_prev"></span>
    </div>
    <ul class="pxs_thumbnails">
    <li><img src="images/thumbs/1.jpg" alt="First Image" /></li>
    <li><img src="images/thumbs/2.jpg" alt="Second Image" /></li>
    </ul>
    </div>
    </div>
    Как видите слайдер помещен в блок pxs_container
    В классе pxs_bg – 3-и блока для фонов.
    В классе pxs_loading – сообщение о загрузке.
    В классе pxs_slider_wrapper – большие, маленькие картинки и кнопки – вперед, назад.

    CSS код:
    Так как этот пример создан на всю ширину страницы, в стиле мы укажим 100%
    .pxs_container{
    width:100%;
    height:420px;
    position:relative;
    border-top:7px solid #333;
    border-bottom:7px solid #333;
    overflow:hidden;
    -moz-box-shadow:0px 0px 7px #000;
    -webkit-box-shadow:0px 0px 7px #000;
    box-shadow:0px 0px 7px #000;
    }
    В блоке смещения фонов будет обычный градиент фона:
    .pxs_bg{
    background:transparent url(../images/bg.png) repeat top left;
    }

    Дивы внутри блока фонов будут иметь такие css свойства:
    .pxs_bg div{
    position:absolute;
    top:0px;
    left:0px;
    height:420px;
    background-repeat:repeat;
    background-position:top left;
    background-color:transparent;
    }
    Как видите – мы не устанавливали ширину - она будет подгонятся автоматически. Нам осталость только указать фоны для каждого блока:
    .pxs_bg .pxs_bg1{
    background-image:url(../images/bg1.png);
    }
    .pxs_bg .pxs_bg2{
    background-image:url(../images/bg2.png);
    }
    .pxs_bg .pxs_bg3{
    background-image:url(../images/bg3.png);
    }
    Основной div с картинками будет невидим в процессе загрузки:
    .pxs_slider_wrapper{
    display:none;
    }
    Это сделанно для плавной и красивой загрузки слайдера.
    Теперь давайте уберем стандартные стили для списков, дабы они не мешали работать:
    .pxs_container ul{
    margin:0px;
    padding:0px;
    list-style:none;
    }
    Так как список со слайдами может быть очень длинным, нам необходимо разместить каждую картинку друг за другом:
    ul.pxs_slider{
    position:absolute;
    left:0px;
    top:0px;
    height:420px;
    }
    ul.pxs_slider li{
    height:420px;
    float:left;
    position:relative;
    }
    То есть – основному стилю мы задали абсолютное значение (с высотой 420px), а все следующие элементы списка li выстроили друг за другом ...

    Теперь давайте оформим картинки внутри слайдера и сделаем их по-центру страницы:
    ul.pxs_slider li img{
    display:block;
    margin:35px auto 0px auto;
    -moz-box-shadow:0px 0px 7px #222;
    -webkit-box-shadow:0px 0px 7px #222;
    box-shadow:0px 0px 7px #222;
    border: 8px solid transparent;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;
    }
    Так же мы создали прозрачные границы – что создает видимость стекла вокруг картинки.

    Превюшки мы позиционируем точно так же. Только с одним отличныем – 50% - то есть по-центру:
    ul.pxs_thumbnails{
    height:35px;
    position:absolute;
    top:320px;
    left:50%;
    }
    ul.pxs_thumbnails li{
    position:absolute;
    display:block;
    }
    Теперь можно создать белую рамку превюшкам и немного прозрачности и тени:
    ul.pxs_thumbnails li img{
    border: 5px solid #FFFFFF;
    -moz-box-shadow:1px 1px 7px #555;
    -webkit-box-shadow:1px 1px 7px #555;
    box-shadow:1px 1px 7px #555;
    cursor:pointer;
    display:block;
    opacity:0.7;
    }
    По замыслу автора – превюшка активной картинки – не должна быть прозрачной:
    ul.pxs_thumbnails li.selected img{
    opacity:1.0;
    }
    Теперь мы добрались до кнопок – вперед, назад и их общий стиль будет следующим:
    .pxs_navigation span{
    position:absolute;
    width:30px;
    height:60px;
    -moz-box-shadow:0px 0px 2px #000;
    -webkit-box-shadow:0px 0px 2px #000;
    box-shadow:0px 0px 2px #000;
    top:145px;
    opacity:0.6;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;
    cursor:pointer;
    }
    .pxs_navigation span:hover{
    opacity:0.9;
    }
    Добавляем картинки стрелок для каждой кнопки:
    .pxs_navigation span.pxs_prev{
    background:#000 url(../images/prev.png) no-repeat center center;
    }
    .pxs_navigation span.pxs_next{
    background:#000 url(../images/next.png) no-repeat center center;
    }
    Ну а на последок – оформим элемент загрузки (блок который показывается пока идет загрузка слайдера) :
    .pxs_loading{
    color:#fff;
    font-size:20px;
    padding:15px 15px 15px 50px;
    position:absolute;
    background:#333 url(../images/ajax-loader.gif) no-repeat 10px 50%;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    border-radius:15px;
    opacity:0.7;
    width:180px;
    position:absolute;
    top:150px;
    left:50%;
    margin-left:-90px;
    }
    jQuery/JavaScript Код:
    Теперь мы переходим к самой объемной части скрипта, так как наш слайдер не только плавно смещает картинки но и фон. При чем фон уходящий должен быть более быстрым чем тот который его сменяет... и т.п.
    Давайте посмотрим код с коментариями:
    (function($) {
    $.fn.parallaxSlider = function(options) {
    var opts = $.extend({}, $.fn.parallaxSlider.defaults, options);
    return this.each(function() {
    var $pxs_container = $(this),
    o = $.meta ? $.extend({}, opts, $pxs_container.data()) : opts;

    //Переменная основного блорка
    var $pxs_slider = $('.pxs_slider',$pxs_container),
    //Елементы внутри слайдера
    $elems = $pxs_slider.children(),
    //Общее число элементов
    total_elems = $elems.length,
    //Кнопки вперед, назад
    $pxs_next = $('.pxs_next',$pxs_container),
    $pxs_prev = $('.pxs_prev',$pxs_container),
    //Большие картики
    $pxs_bg1 = $('.pxs_bg1',$pxs_container),
    $pxs_bg2 = $('.pxs_bg2',$pxs_container),
    $pxs_bg3 = $('.pxs_bg3',$pxs_container),
    //Текущее изображение
    current = 0,
    //Блок превюшек
    $pxs_thumbnails = $('.pxs_thumbnails',$pxs_container),
    //Превюшки слайдера
    $thumbs = $pxs_thumbnails.children(),
    //интервал для авторежима.
    //Загрузка картинок
    $pxs_loading = $('.pxs_loading',$pxs_container),
    $pxs_slider_wrapper = $('.pxs_slider_wrapper',$pxs_container);

    //Какой номер первой загружаемой картинки
    var loaded = 0,
    $images = $pxs_slider_wrapper.find('img');

    $images.each(function(){
    var $img = $(this);
    $('<img/>').load(function(){
    ++loaded;
    if(loaded == total_elems*2){
    $pxs_loading.hide();
    $pxs_slider_wrapper.show();

    //Ширина картинок
    //Для корректной работы – полагаем что все изображения одного размера
    var one_image_w = $pxs_slider.find('img:first').width();

    /*
    Устанавливаем ширину слайдера,
    Каждого элемента и кнопок навигации
    */
    setWidths($pxs_slider,
    $elems,
    total_elems,
    $pxs_bg1,
    $pxs_bg2,
    $pxs_bg3,
    one_image_w,
    $pxs_next,
    $pxs_prev);

    /*
    Установить ширину превюшек,
    и распределить их равномерно
    */
    $pxs_thumbnails.css({
    'width' : one_image_w + 'px',
    'margin-left' : -one_image_w/2 + 'px'
    });
    var spaces = one_image_w/(total_elems+1);
    $thumbs.each(function(i){
    var $this = $(this);
    var left = spaces*(i+1) - $this.width()/2;
    $this.css('left',left+'px');

    if(o.thumbRotation){
    var angle = Math.floor(Math.random()*41)-20;
    $this.css({
    '-moz-transform' : 'rotate('+ angle +'deg)',
    '-webkit-transform' : 'rotate('+ angle +'deg)',
    'transform' : 'rotate('+ angle +'deg)'
    });
    }
    //При наведении оживить превюшки (верх и вниз)
    $this.bind('mouseenter',function(){
    $(this).stop().animate({top:'-10px'},100);
    }).bind('mouseleave',function(){
    $(this).stop().animate({top:'0px'},100);
    });
    });

    //Сделать первую превюшку выделенной
    highlight($thumbs.eq(0));

    //Сменять слайды при клике на кнопки вперед, назад
    $pxs_next.bind('click',function(){
    ++current;
    if(current >= total_elems)
    if(o.circular)
    current = 0;
    else{
    --current;
    return false;
    }
    highlight($thumbs.eq(current));
    slide(current,
    $pxs_slider,
    $pxs_bg3,
    $pxs_bg2,
    $pxs_bg1,
    o.speed,
    o.easing,
    o.easingBg);
    });
    $pxs_prev.bind('click',function(){
    --current;
    if(current < 0)
    if(o.circular)
    current = total_elems - 1;
    else{
    ++current;
    return false;
    }
    highlight($thumbs.eq(current));
    slide(current,
    $pxs_slider,
    $pxs_bg3,
    $pxs_bg2,
    $pxs_bg1,
    o.speed,
    o.easing,
    o.easingBg);
    });

    /*
    При нажатии на маленькое изображение – будет происходить перемещение.
    */
    $thumbs.bind('click',function(){
    var $thumb = $(this);
    highlight($thumb);
    //Если автозапуск и пользователь кликнул на маленькое изображение...
    if(o.auto)
    clearInterval(slideshow);
    current = $thumb.index();
    slide(current,
    $pxs_slider,
    $pxs_bg3,
    $pxs_bg2,
    $pxs_bg1,
    o.speed,
    o.easing,
    o.easingBg);
    });

    /*
    Активировать автозапуск, если действие выполнили.
    */
    if(o.auto != 0){
    o.circular = true;
    slideshow = setInterval(function(){
    $pxs_next.trigger('click');
    },o.auto);
    }

    /*
    Пересчет размеров окна и блоков внутри слайдера, для корректного отображения и следующего слайдинга.
    */
    $(window).resize(function(){
    w_w = $(window).width();
    setWidths(
    $pxs_slider,
    $elems,
    total_elems,
    $pxs_bg1,
    $pxs_bg2,
    $pxs_bg3,
    one_image_w,
    $pxs_next,
    $pxs_prev
    );
    slide(
    current,
    $pxs_slider,
    $pxs_bg3,
    $pxs_bg2,
    $pxs_bg1,
    1,
    o.easing,
    o.easingBg
    );
    });

    }
    }).error(function(){
    alert('here')
    }).attr('src',$img.attr('src'));
    });
    });
    };

    //Текущая ширина окна браузера
    var w_w = $(window).width();

    var slide = function(current,
    $pxs_slider,
    $pxs_bg3,
    $pxs_bg2,
    $pxs_bg1,
    speed,
    easing,
    easingBg){
    var slide_to = parseInt(-w_w * current);
    $pxs_slider.stop().animate({
    left : slide_to + 'px'
    },speed, easing);
    $pxs_bg3.stop().animate({
    left : slide_to/2 + 'px'
    },speed, easingBg);
    $pxs_bg2.stop().animate({
    left : slide_to/4 + 'px'
    },speed, easingBg);
    $pxs_bg1.stop().animate({
    left : slide_to/8 + 'px'
    },speed, easingBg);
    }

    var highlight = function($elem){
    $elem.siblings().removeClass('selected');
    $elem.addClass('selected');
    }

    var setWidths = function($pxs_slider,
    $elems,
    total_elems,
    $pxs_bg1,
    $pxs_bg2,
    $pxs_bg3,
    one_image_w,
    $pxs_next,
    $pxs_prev){
    //Ширина слайдера в текущей ширине окна + общее значение всех блоков
    var pxs_slider_w = w_w * total_elems;
    $pxs_slider.width(pxs_slider_w + 'px');
    //Каждый элемент будет иметь ширину соответствующую ширине окна
    $elems.width(w_w + 'px');
    // Устанавливаем значение ширины для каждого фона
    $pxs_bg1.width(pxs_slider_w + 'px');
    $pxs_bg2.width(pxs_slider_w + 'px');
    $pxs_bg3.width(pxs_slider_w + 'px');
    //Позиционируем кнопки – вперед, назад
    var position_nav = w_w/2 - one_image_w/2 + 3;
    $pxs_next.css('right', position_nav + 'px');
    $pxs_prev.css('left', position_nav + 'px');
    }

    $.fn.parallaxSlider.defaults = {
    auto : 0,
    speed : 1000,
    easing : 'jswing',
    easingBg : 'jswing',
    circular : true,
    thumbRotation : true
    };

    })(jQuery);


    Основная функция готова, для ее запуска необходимо прописать следующий код:
    $(function() {
    var $pxs_container = $('#pxs_container');
    $pxs_container.parallaxSlider();
    });



    Дополнительные опции которые поддерживает функция слайдера:
    1. auto: Какая задержка между сменой слайдов, если 0 – авторежим выключен.
    2. speed: Скорость анимации слайда
    3. easing: Плавность анимации картинок
    4. easingBg: Плавность анимации фона
    5. circular: Цыкличная работа слайдера
    6. thumbRotation: Случайная ротация превюшек.


    Скачать

     
    tiranov07 нравится это.