Веб-дизайнеру
Веб-разработчику
Дополнительно
Слайдер контента JQuery и CSS3 + AutoPlay
Скачать
Демо
↓ Также Вам будет интересно ↓
Сегодня мы создадим слайдер контента JQuery и CSS3 с автоматической прокруткой. Идея состоит в том, чтобы добавить креативности нашему слайдеру, а именно, при переключении изменить фоновое изображение, описание опустить вниз и заголовок вверх. При нажатии на один из пунктов меню, авто воспроизведение прекращается, а просто открыт выбранный пользователем контент. В общем будет интересно. Скачать слайдер jquery, перед началом, Вы можете как всегда по ссылке выше. Также Вы можете посмотреть ещё слайдер товаров для интернет магазина, с эффектами на JQuery. Итак, давайте начнем работу.
Наш любимый код HTML
Структура HTML состоит из основного div, который имеет класс называется rotator и простого маркированного списка ul, где мы добавим все элементы меню, заголовок и описание. Ссылка на полный контент, будет в конце описание. Вот пример 2-ух пунктов меню, которые мы будем использовать для заполнения содержания контентом:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<div class="rotator"> <ul id="rotmenu"> <li> <a href="rot1">Портфолио</a> <div style="display:none;"> <div class="info_image">1.jpg</div> <div class="info_heading">Примеры работ</div> <div class="info_description"> At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident... <a href="#" class="more">Подробнее...</a> </div> </div> </li> <li> <a href="rot2">Сервисы</a> <div style="display:none;"> <div class="info_image">2.jpg</div> <div class="info_heading">Наши услуги</div> <div class="info_description"> At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident... <a href="#" class="more">Подробнее...</a> </div> </div> </li> ... </ul> <div id="rot1"> <img src="" width="800" height="300" class="bg" alt=""/> <div class="heading"> <h1></h1> </div> <div class="description"> <p></p> </div> </div> </div> |
Мы используем осмысленные названия для информации пунктов слайдера – info_image (изображение), info_heading (заголовок), info_description (описание). Фоновое изображение будет иметь исходный путь images/, нам нужно только прописать имя изображения.
Красивости CSS
Основной div с классом rotator, будет иметь следующие стили форматирования:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.rotator{ background-color:#222; width:800px; height:300px; margin:0px auto; position:relative; font-family:'Myriad Pro',Arial,Helvetica,sans-serif; color:#fff; text-transform:uppercase; letter-spacing:-1px; border:3px solid #f0f0f0; overflow:hidden; -moz-box-shadow:0px 0px 10px #222; -webkit-box-shadow:0px 0px 10px #222; box-shadow:0px 0px 10px #222; } |
Так как мы дадим некоторым внутренним элементам слайдера абсолютное позиционирование, нам нужно установить для их родителя позиционирования относительное. Стили для изображения, которое будет вставлено с помощью JQuery, такие:
|
1 2 3 4 5 |
img.bg{ position:absolute; top:0px; left:0px; } |
Список пунктов слайдера со всем контентом должен иметь более высокий z-index, чем остальные элементы, так как мы хотим, наш контент был поверх всего остального. Если мы оставим по умолчанию, то текст просто спрячется под изображение:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.rotator ul{ list-style:none; position:absolute; right:0px; top:0px; margin-top:6px; z-index:999999; } .rotator ul li{ display:block; float:left; clear:both; width:260px; } |
Ссылки имеют следующее форматирование, которое Вы можете, в принципе, задать на свой вкус и цвет:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
.rotator ul li a{ width:230px; height:52px; float:right; clear:both; padding-left:10px; text-decoration:none; display:block; line-height:52px; background-color:#222; margin:1px -20px 1px 0px; opacity:0.7; color:#f0f0f0; font-size:20px; border:2px solid #000; border-right:none; outline:none; text-shadow:-1px 1px 1px #000; -moz-border-radius:10px 0px 0px 20px; -webkit-border-top-left-radius:10px; -webkit-border-bottom-left-radius:20px; border-top-left-radius:10px; border-bottom-left-radius:20px; } .rotator ul li a:hover{ text-shadow:0px 0px 2px #fff; } |
С помощью свойства border-radius мы создаем асимметричный вид пунктов меню слайдера. Для текста будет создан эффект свечения при наведении на текст.
Хорошо, идем далее. CSS стили для заголовка и описания:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
.rotator .heading{ position:absolute; top:0px; left:0px; width:500px; } .rotator .heading h1{ text-shadow:-1px 1px 1px #555; font-weight:normal; font-size:46px; padding:20px; } .rotator .description{ width:500px; height:80px; position:absolute; bottom:0px; left:0px; padding:20px; background-color:#222; -moz-border-radius:0px 10px 0px 0px; -webkit-border-top-right-radius:10px; border-top-right-radius:10px; opacity:0.7; border-top:2px solid #000; border-right:2px solid #000; } .rotator .description p{ text-shadow:-1px 1px 1px #000; text-transform:none; letter-spacing:normal; line-height:26px; } a.more{ color:orange; text-decoration:none; text-transform:uppercase; font-size:10px; } a.more:hover{ color:#fff; } |
Со стилями все, теперь самое интересное, мы оживим наш слайдер с помощью JQuery.
Креативность JavaScript
Во-первых, нам нужно добавить скрипт JQuery, а также мы будем использовать JQuery плагин смягчения, чтобы создать некоторые интересные эффекты затухания, поэтому их необходимо подключить:
|
1 2 |
<script type="text/javascript" src="/web-developer/jquery/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="/web-developer/jquery/jquery.easing.1.3.js"></script> |
Мы добавим это после всего содержимого, но до закрывающего тега body.
Затем мы добавляем этот скрипт, заключенный в теги script:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
$(function() { /* the index of the current list element */ var current = 1; /* function to iterate through all the list elements */ var iterate = function(){ var i = parseInt(current+1); var lis = $('#rotmenu').children('li').size(); if(i>lis) i = 1; display($('#rotmenu li:nth-child('+i+')')); } /* Initially display the first one */ display($('#rotmenu li:first')); /* In intervals of 3 seconds jump to the next element */ var slidetime = setInterval(iterate,3000); /* if the User clicks on one list item, the auto slider stops */ $('#rotmenu li').bind('click',function(e){ clearTimeout(slidetime); display($(this)); e.preventDefault(); }); /* displays each element associated to the "elem" list element */ function display(elem){ var $this = elem; var repeat = false; if(current == parseInt($this.index() + 1)) repeat = true; /* slide in the current one */ if(!repeat) $this.parent() .find('li:nth-child('+current+') a') .stop(true,true) .animate({'marginRight':'-20px'},300,function(){ $(this).animate({'opacity':'0.7'},700); }); current = parseInt($this.index() + 1); var elem = $('a',$this); /* slide out the clicked or next one */ elem.stop(true,true).animate({'marginRight':'0px','opacity':'1.0'},300); /* the heading and description will slide out, change the content and slide back in */ var info_elem = elem.next(); $('#rot1 .heading').animate({'left':'-420px'}, 500,'easeOutCirc',function(){ $('h1',$(this)).html(info_elem.find('.info_heading').html()); $(this).animate({'left':'0px'},400,'easeInOutQuad'); }); $('#rot1 .description').animate({'bottom':'-270px'},500,'easeOutCirc',function(){ $('p',$(this)).html(info_elem.find('.info_description').html()); $(this).animate({'bottom':'0px'},400,'easeInOutQuad'); }) /* the image will fade out and another will fade in */ $('#rot1').prepend( $('<img alt="">',{ style : 'opacity:0', className : 'bg' }).load( function(){ $(this).animate({'opacity':'1'},600); $('#rot1 img:first').next().animate({'opacity':'0'},700,function(){ $(this).remove(); }); } ).attr('src','images/'+info_elem.find('.info_image').html()) .attr('width','800') .attr('height','300') ); } }); |
Вот и все готово! Если у вас что-то не получилось, не переживайте, скачивайте слайдер jquery по ссылку в начале статьи, и пользуйтесь. Надеюсь Вам понравилось и было интересно! 
Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока:
Перевел: Владислав Бондаренко
