Очень красивый слайдер с эффектом смещения фона при смене слайда (картинки). Слайдер плавно сменяет картинку, в навигации есть кнопки – назад, вперед и красиво размещенные превюшки картинок. 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(); }); Дополнительные опции которые поддерживает функция слайдера: auto: Какая задержка между сменой слайдов, если 0 – авторежим выключен. speed: Скорость анимации слайда easing: Плавность анимации картинок easingBg: Плавность анимации фона circular: Цыкличная работа слайдера thumbRotation: Случайная ротация превюшек. Скачать
