Полезное в сети

Всегда в теме

Статистика


Яндекс.Метрика


Онлайн всего: 1
Гостей: 1
Пользователей: 0

Рекомендуем



Главная » 2013 » Апрель » 14 » Вращающиеся изображения Слайд-шоу на CSS3 и JQuery


23:21
Вращающиеся изображения Слайд-шоу на CSS3 и JQuery

Вращающиеся изображения Слайд-шоу на CSS3 и JQuery

 

Сегодня мы собираемся использовать JQuery и CSS3 повороты, наряду с JQuery плагином  вращения, чтобы создать красивое слайд-шоу. Вы можете использовать его, чтобы оживить ваши веб-сайты, страницы продуктов и другие проекты.

СМОТРЕТЬ ДЕМО                   СКАЧАТЬ  ИСХОДНИК

 

HTML

Следуя традиции, мы начнем с создания HTML разметки слайд-шоу. Основным элементом контейнера будет элемент  DIV.

index.html

 

<!DOCTYPE html>

 

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Rotating Slideshow With jQuery and CSS3 | Tutorialzine Demo</title>

 

<link rel="stylesheet" type="text/css" href="css/styles.css" />

 

</head>

<body>

 

<div id="slideShowContainer">

 

    <div id="slideShow">

 

                <ul>

            <li><img src="img/photos/1.jpg" width="100%" alt="Fish" /></li>

            <li><img src="img/photos/2.jpg" width="100%" alt="Ancient" /></li>

            <li><img src="img/photos/3.jpg" width="100%" alt="Industry" /></li>

            <li><img src="img/photos/4.jpg" width="100%" alt="Rain" /></li>

        </ul>

 

    </div>

 

    <a id="previousLink" href="#">»</a>

    <a id="nextLink" href="#">«</a>

 

</div>

 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script src="js/jquery.rotate.js"></script>

<script src="js/script.js"></script>

 

</body>

</html>

 

Слайды определяются как элементы LI внутри неупорядоченного списка. Обратите внимание, что ширина изображения установлен на 100%.

В нижней части, мы включаем JQuery библиотеки, наши собственные script.js файл, и плагин JQuery поворот. Мы используем плагин, поэтому мы можем работать с CSS3 вращением  в кросс-браузерной моде, как вы увидите на последнем шаге этого урока.

 

CSS

styles.css

 

#slideShowContainer{

                width:510px;

                height:510px;

                position:relative;

                margin:120px auto 50px;

}

 

#slideShow{

                position:absolute;

                height:490px;

                width:490px;

                background-color:#fff;

                margin:10px 0 0 10px;

                z-index:100;

 

                -moz-box-shadow:0 0 10px #111;

                -webkit-box-shadow:0 0 10px #111;

                box-shadow:0 0 10px #111;

}

 

#slideShow ul{

                position:absolute;

                top:15px;

                right:15px;

                bottom:15px;

                left:15px;

                list-style:none;

                overflow:hidden;

}

 

#slideShow li{

                position:absolute;

                top:0;

                left:0;

                width:100%;

                height:100%;

}

 

#slideShowContainer > a{

                border:none;

                text-decoration:none;

                text-indent:-99999px;

                overflow:hidden;

                width:36px;

                height:37px;

                background:url('../img/arrows.png') no-repeat;

                position:absolute;

                top:50%;

                margin-top:-21px;

}

 

#previousLink{

                left:-38px;

}

 

#previousLink:hover{

                background-position:bottom left;

}

 

a#nextLink{

                right:-38px;

                background-position:top right;

}

 

#nextLink:hover{

                background-position:bottom right;

}

 

Несмотря на то, что мы определили ширину  490px , ее полный размер на самом деле510px . Эта разница в 20px внизу изображения  (так как они привязаны к ширине  Слайда, которые восстанавливаются от их нормального размера 480px до 460px. Как вы увидите в следующем шаге мы используем JQuery анимацию, чтобы увеличить изображение до полного размера. Таким образом, даже при полном увеличении, изображение в действительности обычного размера, и нет потери качества.

 

 

JQuery

Хотя большинство современных браузеров поддерживает CSS3 вращения, это все еще довольно много работы со свойствами конкретного производителя. К счастью, есть плагины которые занимаются этим вместо нас. Я выбрал плагин JQuery поворот, так как он также прекрасно интегрируется с анимацией  и CSS , это означает, что мы можем легко анимировать вращение элементов

script.js - Часть 1

 

$(document).ready(function(){

 

                var slideShow = $('#slideShow'),

                               ul = slideShow.find('ul'),

                               li = ul.find('li'),

                               cnt = li.length;

 

                // As the images are positioned absolutely, the last image will be shown on top.

                // This is why we force them in the correct order by assigning z-indexes:

 

                updateZindex();

 

                if($.support.transform){

 

                               // Modern browsers with support for css3 transformations

 

                               li.find('img').css('rotate',function(i){

                                               // Rotating the images counter-clockwise

                                               return (-90*i) + 'deg';

                               });

 

                               // Binding a custom event. the direction and degrees parameters

                               // are passed when the event is triggered later on in the code.

 

                               slideShow.bind('rotateContainer',function(e,direction,degrees){

 

                                               // Zooming in the slideshow:

 

                                               slideShow.animate({

                                                               width                   : 510,

                                                               height                  : 510,

                                                               marginTop         : 0,

                                                               marginLeft         : 0

                                               },'fast',function(){

 

                                                               if(direction == 'next'){

 

                                                                              // Moving the topmost image containing Li at

                                                                              // the bottom after a fadeOut animation

 

                                                                              $('li:first').fadeOut('slow',function(){

                                                                                              $(this).remove().appendTo(ul).show();

                                                                                              updateZindex();

                                                                              });

                                                               }

                                                               else {

 

                                                                              // Showing the bottommost Li element on top

                                                                              // with a fade in animation. Notice that we are

                                                                              // updating the z-indexes.

 

                                                                              var liLast = $('li:last').hide().remove().prependTo(ul);

                                                                              updateZindex();

                                                                              liLast.fadeIn('slow');

                                                               }

 

                                                               // Rotating the slideShow. css('rotate') gives us the

                                                               // current rotation in radians. We are converting it to

                                                               // degrees so we can add +90 or -90.

 

                                                               slideShow.animate({

                                                                              rotate:Math.round($.rotate.radToDeg(slideShow.css('rotate'))+degrees) + 'deg'

                                                               },'slow').animate({

                                                                              width                   : 490,

                                                                              height                  : 490,

                                                                              marginTop         : 10,

                                                                              marginLeft         : 10

                                                               },'fast');

                                               });

                               });

 

                               // By triggering the custom events below, we can

                               // show the previous / next images in the slideshow.

 

                               slideShow.bind('showNext',function(){

                                               slideShow.trigger('rotateContainer',['next',90]);

                               });

 

                               slideShow.bind('showPrevious',function(){

                                               slideShow.trigger('rotateContainer',['previous',-90]);

                               });

                }

 

В коде выше, вы можете видеть, что мы связали количество пользовательских событий.showNext и showPrevious, которые  мы используем для управления слайд-шоу. Это, в свою очередь, выполнит  событие rotateContainer, и передаст  направление и степень качества  параметров (вы можете объединить их в один параметр, но я считаю его более четким, в таком варианте).

 

 

script.js - Часть 2

 

                else{

                               // Fallback for Internet Explorer and older browsers

 

                               slideShow.bind('showNext',function(){

                                               $('li:first').fadeOut('slow',function(){

                                                               $(this).remove().appendTo(ul).show();

                                                               updateZindex();

                                               });

                               });

 

                               slideShow.bind('showPrevious',function(){

                                               var liLast = $('li:last').hide().remove().prependTo(ul);

                                               updateZindex();

                                               liLast.fadeIn('slow');

                               });

                }

 

                // Listening for clicks on the arrows, and

                // triggering the appropriate event.

 

                $('#previousLink').click(function(){

                               if(slideShow.is(':animated')){

                                               return false;

                               }

 

                               slideShow.trigger('showPrevious');

                               return false;

                });

 

                $('#nextLink').click(function(){

                               if(slideShow.is(':animated')){

                                               return false;

                               }

 

                               slideShow.trigger('showNext');

                               return false;

                });

 

                // This function updates the z-index properties.

                function updateZindex(){

 

                               // The CSS method can take a function as its second argument.

                               // i is the zero-based index of the element.

 

                               ul.find('li').css('z-index',function(i){

                                               return cnt-i;

                               });

                }

 

});

 

Во второй части кода, вы можете увидеть фрагмент, который выполняется только в браузерах, которые не поддерживают CSS3 преобразований. Обратите внимание, что в этом случае мы также определим тот же showNext и showPrevious событие, но здесь они просто исчезают в или из изображения, не запуская вращения.

UpdateZindex  функция также важна, так как в противном случае слайды будут показаны в обратном порядке. Эта функция перебирает элементы в том порядке, в котором они находятся настоящее время, и поэтому они отобразятся корректно.

Все наше слайд-шоу готово!

СМОТРЕТЬ ДЕМО                   СКАЧАТЬ  ИСХОДНИК

 

 

Ссылка на источник

Категория: CSS//HTML//JS | Просмотров: 1021 | Добавил: Iron | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Поиск

Вход

Гость
  • Вход
  • Регистрация
  • Читаемое

    Категории

    Заходи не жди