Слайдер изображений на jQuery без плагинов
Одной из самых популярных задач, которые делаются на jQuery, является создание плагина изображений. У меня на сайте службы поддержки есть как раз такой слайдер. Я создавал этот слайдер изображений с переключателями без плагинов. И его код в этой статье я сейчас приведу.
Для начала разберём HTML-код:
<div id="container">
<div id="slider">
<h3>Заголовок слайдера</h3>
<div id="course_1" class="show">
<a href="http://srs.myrusakov.ru/kurs">
<img alt="Создание и Раскрутка сайта от А до Я" src="images/kurs-cover.png" />
</a>
<br />
<a href="http://srs.myrusakov.ru/kurs">Создание и Раскрутка сайта от А до Я</a>
</div>
<div id="course_2">
<a href="http://srs.myrusakov.ru/makeup">
<img alt="Вёрстка сайта с нуля" src="images/makeup-cover.png" />
</a>
<br />
<a href="http://srs.myrusakov.ru/makeup">Вёрстка сайта с нуля</a>
</div>
<div id="course_3">
<a href="http://srs.myrusakov.ru/php">
<img alt="PHP и MySQL с Нуля до Гуру" src="images/php-cover.png" />
</a>
<br />
<a href="http://srs.myrusakov.ru/makeup">PHP и MySQL с Нуля до Гуру</a>
</div>
</div>
<div id="switch">
<img data-number="1" alt="Переключатель" src="images/slider_on.png" />
<img data-number="2" alt="Переключатель" src="images/slider_off.png" />
<img data-number="3" alt="Переключатель" src="images/slider_off.png" />
</div>
</div>
Думаю, что принцип потянен: есть основной блок container, который содержит блок slider и switch. Последний хранит переключатели. А slider содержит блоки, которые по-очереди будут показываться пользователю. Внутри этих блоков уже может быть, вообще говоря, любой контент.
Теперь добавим CSS:
#container {
text-align: center;
width: 300px;
}
#slider div {
opacity: 0;
position: absolute;
}
#slider div.show {
opacity: 1;
z-index: 100;
}
#switch {
margin-top: 360px;
}
#switch img {
cursor: pointer;
}
#slider img {
width: 300px;
}
По сути, данный CSS-код размещает блоки друг под другом. Делая их полностью прозрачными. А единственный блок, который будет видимым, делается непрозрачным, а также размещён всегда поверх остальных. Всё остальное, думаю, понятно.
И, наконец, остался код JavaScript:
<script type="text/javascript">
var course_delay = 500; // Задержка при смене блока
var course_delay_auto = 5000; // Время показа блока в автоматическом режиме
var course_active = 1; // Текущий активный блок
var course_count = $("#slider div[id^='course']").size(); // Количество блоков
var course_timer = setTimeout("setCourse(0)", course_delay_auto); // Включаем автоматическую смену блоков
$("#switch img").bind("click", function(event) {
setCourse($(event.target).attr("data-number")); // При клике по переключателю выводим соответствующий блок
});
function setCourse(number) {
if (number == course_active) return; // Если выбранный блок и так активен, то выходим из функции
var temp = course_active; // Сохраняем в temp старый активный блок
/* Получаем номер следующего активного блока */
if (number == 0) {
/* Если не был задан конкретный номер */
course_active++;
if (course_active > course_count) course_active = 1;
}
else course_active = number;
$("#switch img[data-number='" + temp + "']").attr("src", "images/slider_off.png"); // Выключаем "активный" переключатель
$("#switch img[data-number='" + course_active + "']").attr("src", "images/slider_on.png"); // Включаем новый переключатель
$("#course_" + course_active).css({opacity: 0.0}).addClass("show").animate({opacity: 1.0}, course_delay); // Выводим новый блок
$("#course_" + temp).animate({opacity: 0.0}, course_delay, function () { // Прячем старый блок
clearTimeout(course_timer); // Выключаем таймер
course_timer = setTimeout("setCourse(0)", course_delay_auto); // Включаем таймер
}).removeClass("show");
}
</script>
Код я прокомментировал достаточно подробно, однако, возможно, не очень понятно, зачем выключать таймер, а после его сразу включать. Ответ простой - сбросить задержку. Допустим, таймер проработал 3 секунды и через 2 секунды он должен сменить блок. Пользователь в этот момент кликает по переключателю, пока там всё сменится, останется до срабатывания таймера примерно 1 секунда. То есть пользователь не успел кликнуть, а таймер ему уже включает следующий блок. Тогда как логично, чтобы при смене блока, таймер снова ждал 5 секунд до следующей автоматической смены.
Вот такой не очень сложный скрипт, но в то же время весьма функциональный и красивый. А целью данной статьи является демонстрация Вам того, что далеко не всегда нужно прибегать к плагинам. Подобный слайдер изображений можно было сделать и с помощью плагина, только вот кода было бы раз в 50 больше (из-за кода плагина, разумеется), плюс Вы не смогли бы вносить мелкие изменения.
Следовательно, использовать плагины стоит только для сложных задач, а для простых - лучше написать всё самому.
-
Создано 18.11.2013 12:15:39
-
Михаил Русаков
Комментарии (4):
Спасибо за урок! Не подскажете, а как добавить еще один переключатель, но уже в виде стрелочек по бокам? Спасибо.
Ответить
почему то у меня он не работает
Ответить
Добрый вечер Михаил! Спасибо большое за урок! У меня возникли проблемы, показывает только первую картинку, но остальные не показывает. В чем может быть проблема?
Ответить
нижеследующую строку из скрипта js необходимо перенести внутрь функции setCourse: var course_count = $("#slider div[id^='course']").size(); // Количество блоков
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.