js Слайдер картинок с перспективой на JQuery 

Дата публикации  Дата изменения25.01.15  КомментарииНет   Просмотры2181

Parallax Slider – использует принцип параллакса для сдвига разных фонов при слайде картинок, что создает некоторую приятную перспективу. Так же это придает глубину всему слайдеру при переключении картинок. Практически 3D. Детальное описание на сайте источника (английский).

Пример использования:

Между <head></head>:

  <link rel="stylesheet" type="text/css" href="css/style.css" />
 <script src="js/cufon-yui.js" type="text/javascript"></script>
 <script src="js/ChunkFive_400.font.js" type="text/javascript"></script>
 <script type="text/javascript">
 Cufon.replace('h1',{ textShadow: '1px 1px #000'});
 Cufon.replace('h2',{ textShadow: '1px 1px #000'});
 Cufon.replace('.footer',{ textShadow: '1px 1px #000'});
 Cufon.replace('.pxs_loading',{ textShadow: '1px 1px #000'});
 </script>

Между <body></body>:

 <div class="wrapper">
 <h1>Parallax Slider Demo</h1>
 <h2>Create some depth with the parallax effect</h2>
 </div>
<!--//-->
 <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>
 <li><img src="images/3.jpg" alt="Third Image" /></li>
 <li><img src="images/4.jpg" alt="Forth Image" /></li>
 <li><img src="images/5.jpg" alt="Fifth Image" /></li>
 <li><img src="images/6.jpg" alt="Sixth 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>
 <li><img src="images/thumbs/3.jpg" alt="Third Image" /></li>
 <li><img src="images/thumbs/4.jpg" alt="Forth Image" /></li>
 <li><img src="images/thumbs/5.jpg" alt="Fifth Image" /></li>
 <li><img src="images/thumbs/6.jpg" alt="Sixth Image" /></li>
 </ul>
 </div>
 </div>
<!--//-->
 <!-- The JavaScript -->
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><!-- // подключение jquery//-->
 <script type="text/javascript" src="js/jquery.easing.1.3.js"></script><!-- // дополнение, облегчающее(сглаживающие) некоторые эффекты jquery//-->
 <script type="text/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(),
 //интервал режима автоповторения
 slideshow,
 //загрузка картинки
 $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);
 $('').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');
//мы также устанавливаем ширину div каждой большой картинки. Размер тот же, что и для pxs_slider
 $pxs_bg1.width(pxs_slider_w + 'px');
 $pxs_bg2.width(pxs_slider_w + 'px');
 $pxs_bg3.width(pxs_slider_w + 'px');
//
//левая и правая границы навигационных кнопок "следующий" и  "предыдущий"  будут: windowWidth/2 – imgWidth/2 + какой-то margin (не соприкасающийся с границами картинок)
 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,	//сколько секунд периодически слайдировать контент.
 // если "0", то автосдвиг выключен.
 speed : 1000,//скорость анимации каждого слайда
 easing : 'jswing',// сглаживающий эффект анимации слайда
 easingBg : 'jswing',//сглаживающий эффект для анимации фона
 circular : true,//повторяющийся слайдер
 thumbRotation	: true//миниатюры будут случайным образом ротироваться
 };
//если убрать коммент со строки внизу, то будут включены эти эффекты:
 //easeInOutExpo,easeInBack
 })(jQuery);
 </script>
//запуск параллакса
 <script type="text/javascript">
 $(function() {
 var $pxs_container	= $('#pxs_container');
 $pxs_container.parallaxSlider();
 });
</script>

  Размер:  1,00MB | Изменен: 20.01.13 | Загрузок: 18
Бесплатные курсы

Категории

Теги: , , , , ,

Оцените материал:

Рейтинг: 0.0/10 (0)


КомментарииКомментарии:

Нет комментариев к этой статье.


Поля, обозначенные как *, обязательны.





Максимальная длина сообщения 900 символов. Осталось   символов

 

Старые →← Новые