CodeNet / Языки программирования / Java Script / jQuery
CodeNet / Языки программирования / Java Script / Меню и навигация
JQuery слайдер
Автор: Mikhail Krivyy
7 февраля 2013 года
Последнее время большую популярность приобрели движущиеся горизонтальные панели, известные также как "Слайдеры" или "Карусели". Оно и понятно, это простой и очень эффективный метод привлечь внимание пользователя. Слайдеры позволяют активнее влиять на поведение пользователей на сайте и продвигать необходимые материалы.
На сегодняшний день существуют сотни, если не тысячи готовых скриптов и модулей для организации слайдера. Вы можете вбить в Google строку "JQuery slider" и найдете десятки обзоров с ссылками на сотни готовых модулей "слайдеров" и "каруселей".
Основная проблема всех готовых модулей - универсальность, громоздкость и, иногда, сложность настройки. Создать слайдер с нуля, иногда, проще чем настроить готовый модуль, ибо простой слайдер - это лишь пара строк кода на JavaScript.
В этой небольшой заметке я покажу как с нуля создать свой слайдер.
- Посмотреть работающий пример;
- Скачать исходный код [ZIP, 240 Кб].
Слайдер с точки зрения HTML верстки
С точки зрения HTML верстки слайдер состоит из двух основных частей - "окна" отображения (viewport) и основного содержимого, состоящего из нескольких слайдов. Ширина одного слайда обычно равна ширине окна отображения. Остальные слайды, не влазят в окно отображения просто не видны.
Ниже приведен пример самого простого слайдера с описанием в комментариях.
<style type="text/css">
/* Основной контейнер для всех элементов слайдера. Его размеры 640x400*/
#slider {width:638px;height:400px;}
/* Фиксированный контейнер прокручиваемых элементов слайдера */
#slider_container {width:638px;height:500px;position:absolute;overflow:hidden;}
/* Плавающий контейнер прокручиваемых элементов слайдера. Ширина задается в свойстве style. */
#slider_moving_container {position:absolute;left:0px;}
/* Элемент слайдера. В этом примере можно было бы просто использовать изображение, но мы то пойдем дальше */
.slider_element {cursor:pointer;width:640px;height:500px;position:absolute;}
</style>
<!-- HTML верстка слайдера -->
<!-- Основной контейнер -->
<div id="slider">
<!-- Фиксированный контейнер -->
<div id="slider_container">
<!-- Плавающий контейнер -->
<div id="slider_moving_container">
<!-- Слайд №1. Вместо div можно было бы использовать просто изображение, но в слайды нужно будет вставить текст. -->
<div class="slider_element" onclick="location.href='http://www.codenet.ru/cat/WEB-Development/HTML/';" id="slider_1" style="left:0;background-image: url('/np-includes/upload/2013/02/06/131036_original.jpg');">
</div>
<!-- Слайд №2 -->
<div class="slider_element" onclick="location.href='http://www.codenet.ru/cat/Languages/PHP/';" id="slider_2" style="left:640px;background-image: url('/np-includes/upload/2013/02/06/131037_original.jpg');">
</div>
<!-- Слайд №3 -->
<div class="slider_element" onclick="location.href='http://www.codenet.ru/cat/Languages/JavaScript/';" id="slider_3" style="left:1280px;background-image: url('/np-includes/upload/2013/02/06/131038_original.jpg');">
</div>
</div>
</div>
</div>
</body>
</html>
HTML код отобразит слайдер, но этого мало. Слайды должны автоматические меняться через некоторое время. Эта небольшая программа на JavaScript раз в 10 секунд меняет слайдер на очередной.
var slider_total=3; // Общее количество слайдов
function slider_auto_run() {
setTimeout(function() {
// Переход к следующему слайду
slider_position++;
// Переход от последнего к первому слайду
if (slider_position>slider_total) slider_position=1;
// Сдвиг слайда и анимация с помощью JQuery animate()
$('#slider_moving_container').animate({left: -((slider_position-1)*640)+'px'});
// Повтор
slider_auto_run();
}, 10000); /* Каждый 10 секунд */
};
slider_auto_run();
Результат работы примера можно посмотреть на демо-странице.
Чтобы слайдер имел законченный вид, его необходимо снабдить элементами навигации и добавить подписи к слайдам.
<style type="text/css">
<!-- Общие стили слайдера (см. первый пример -->
#slider {width:638px;height:500px;}
#slider_container {width:638px;height:500px;position:absolute;overflow:hidden;}
#slider_moving_container {position:absolute;left:0px;}
.slider_element {cursor:pointer;width:640px;height:500px;position:absolute;}
<!-- Стили для стрелок навигации вправо и влево -->
#slider_right {width:25px;height:51px;display:block;background-image: url('/np-includes/upload/2013/02/06/131040.png');float:right;margin:265px 0 0 615px;position:absolute;}
#slider_left {width:25px;height:51px;display:block;background-image: url('/np-includes/upload/2013/02/06/131039.png');float:left;margin-top:265px;position:absolute;}
<!-- Стили для текстов подписей -->
#slider_info {background:#333;height:132px;width:596px;display:block;padding:22px 32px 0 32px;margin-top:346px;}
#slider_title {font-family:times; font-size:30px;color: #ffc;text-decoration:none;display:block;margin:0;}
#slider_description {font-size:12px;color:white;text-decoration:none;display:block;margin:7px 0 0 0;}
#slider_hint {font-size:11px;color:#ccc;margin:2px 0 0 0;}
</style>
</head>
<body style="font-family:arial;font-size:12px;">
<div id="slider">
<div id="slider_container">
<div id="slider_moving_container">
<!-- Слайд №1 -->
<div class="slider_element" onclick="location.href='http://www.codenet.ru/cat/WEB-Development/HTML/';" id="slider_1" style="left:0;background-image: url('/np-includes/upload/2013/02/06/131036_original.jpg');">
<!-- Текст подписи слайда -->
<div id="slider_info">
<a href="http://www.codenet.ru/cat/WEB-Development/HTML/" id="slider_title">Невский Экспресс</a>
<a href="http://www.codenet.ru/cat/WEB-Development/HTML/" id="slider_description">Электровоз ЧС200-004 с поездом "Невский Экспресс". Станция Рябово. Скорость 160 км/ч. Февраль 2013 года.</a>
</div>
</div>
<!-- Слайд №2 -->
<div class="slider_element" onclick="location.href='http://www.codenet.ru/cat/Languages/PHP/';" id="slider_2" style="left:640px;background-image: url('/np-includes/upload/2013/02/06/131037_original.jpg');">
<!-- Текст подписи слайда -->
<div id="slider_info">
<a href="http://www.codenet.ru/cat/WEB-Development/HTML/" id="slider_title">Санкт-Петербург - Брянск</a>
<a href="http://www.codenet.ru/cat/WEB-Development/HTML/" id="slider_description">Электровоз ЧС2Т-1026 с поездом Санкт-Петербург - Брянск. Перегон Чудово-Московское - Гряды. В районе платформы Дубцы. Скорость 100 км/ч. Февраль 2013 года.</a>
</div>
</div>
<!-- Слайд №3 -->
<div class="slider_element" onclick="location.href='http://www.codenet.ru/cat/Languages/JavaScript/';" id="slider_3" style="left:1280px;background-image: url('/np-includes/upload/2013/02/06/131038_original.jpg');">
<!-- Текст подписи слайда -->
<div id="slider_info">
<a href="http://www.codenet.ru/cat/WEB-Development/HTML/" id="slider_title">"Сапсан"</a>
<a href="http://www.codenet.ru/cat/WEB-Development/HTML/" id="slider_description">Электропоезд ЭВС1-005 "Сапсан" и электровоз ЧС2Т-1014 с поездом Санкт-Петербург - Ижевск. Перегон Чудово-Московское - Гряды. В районе платформы Дубцы. Скорость 100 км/ч. Февраль 2013 года.</a>
</div>
</div>
</div>
</div>
<!-- Элементы навигации по слайдам -->
<a href="#" id="slider_right"></a>
<a href="#" id="slider_left"></a>
</div>
Код автоматической смены слайдов немного изменился из-за реализации ручного управления (стрелки "влево" и "вправо"). Если пользователь по клику сменил слайд, то автоматическая смена слайдов выключается.
Результат работы примера можно посмотреть на демо-странице.
var slider_total=3; // Общее количество слайдов
var slider_auto=true; // Автоматическая смена слайдов - true, ручная смена слайдов - false
// Обработчик клика по навигационной стрелке "вправо".
$('#slider_right').click(function() {
// Выключение автоматической смена слайдов
slider_auto=false;
// Переход к следующему слайду
slider_position++;
// Переход к первому слайду, если слайды закончились
if (slider_position>slider_total) slider_position=1;
// Смена слайда с анимацией
$('#slider_moving_container').animate({left: -((slider_position-1)*640)+'px'});
return false;
});
$('#slider_left').click(function() {
// Выключение автоматической смена слайдов
slider_auto=false;
// Переход к предыдущему слайду
slider_position--;
// Переход к последнему слайду, если необходимо
if (slider_position<1) slider_position=slider_total;
// Смена слайда с анимацией
$('#slider_moving_container').animate({left: -((slider_position-1)*640)+'px'});
return false;
});
// Автоматическая смена слайдов. См. предыдущий пример.
function slider_auto_run() {
setTimeout(function() {
// Если включено ручное управление слайдами, то ничего не делать
if (!slider_auto) return;
slider_position++;
if (slider_position>slider_total) slider_position=1;
$('#slider_moving_container').animate({left: -((slider_position-1)*640)+'px'});
slider_auto_run();
}, 10000);
};
slider_auto_run();Оставить комментарий
Комментарии
Не-е-е, лучше уж я буду "мучиться" с настройкой готовых слайдеров, чем самостоятельно писать настолько "простой" слайдер с нуля.
