Веб-дизайнеру
Веб-разработчику
Дополнительно
Последовательный слайдер картинок JQuery
Скачать
Демо
↓ Также Вам будет интересно ↓
Приветствую, уважаемый гость или постоянный посетитель нашего сайта! Иногда для отображения картинок (или товаров, но мы описываем их как картинки) необходимо, чтобы каждый пункт скользил последовательно, а не сдвигался целой группой. В этом уроке мы будем создавать слайдер картинок JQuery, с помощью JavaScript функции window.setTimeout для работы анимации каждого элемента слайдера.
В этом уроке пойдет речь о том, как создать простой слайдер jquery. приглашаю посмотреть статью о том, как создать слайдер товаров для интернет магазина.
Техническая часть HTML & CSS
Картинки будут отображаться горизонтально и всего мы имеем 6 пунктов в слайдере. В качестве примера изображений мы используем вкусный набор иконок от Smashing Magazine, созданный Iconeden. Кнопки управления слайдером “Вперед” и “Назад” размещены соответственно на правой и левой стороне списка картинок. Вот наша любимая html разметка и стили css:
|
1 2 3 4 5 6 7 8 |
<div class="prev"></div> <ul class="list"> <!-- item list --> <li><img src="images/item/1.png" width="78"></li> <li><img src="images/item/2.png" width="78"></li> <!-- item list --> </ul> <div class="next"></div> |
|
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 |
.list { display: inline-block; list-style-type: none; margin: 0; width: 100000px; text-align: left; background: url('images/wood.png') bottombottom left no-repeat; } .list li { display: inline-block; width: 78px; margin: 2.2em 1.4em; position: relative; vertical-align: bottombottom; } .next, .prev { display: block; position: absolute; width: 35px; height: 35px; cursor: pointer; border-radius: 5px; } .next { margin-top: -7.2em; rightright: 5%; background: url('images/next.png') center center no-repeat; } .next:hover { background: rgba(255,255,255,0.3) url('images/next.png') center center no-repeat; } .prev { margin-top: 3em; left: 5%; background: url('images/prev.png') center center no-repeat; } .prev:hover { background: rgba(255,255,255,0.3) url('images/prev.png') center center no-repeat; } |
Ничего сложно здесь нет, в общем-то стандартная структура для списка и некоторые необходимые стили для слайдера. В итоге мы имеем следующее:
Инициализация переменных
Первое, что мы делаем, это инициализация всех переменных. Они будут доступны для кнопок “вперед” и “назад” соответственно.
|
1 2 3 4 5 6 7 8 |
onMoving = false; item = $('.list li'); itemReverse = item.get().reverse(); itemSize = item.size(); itemDisplayed = 6; itemToSlide = itemDisplayed * 9; currentSlide = 1; page = Math.round(itemSize/itemDisplayed); |
Добавление события нажатия
Теперь мы добавим событие нажатия на кнопки предыдущий и следующий, для смены картинок слайдера. После окончания картинок слайдера, кнопка просто становится неактивной.
|
1 2 3 4 5 6 7 8 9 10 11 |
$('.next').click(function() { if(onMoving || currentSlide >= 3) return false; onMoving = true, currentSlide++; }); $('.prev').click(function() { if(onMoving || currentSlide == 1) return false; onMoving = true, currentSlide--; }); |
Последовательность переменных
Чтобы сделать перемещение каждого элемента последовательным, мы должны получить доступ к каждому элементу с помощью функции $.each(). При обращении к каждому пункту мы будем двигать его, но при этом удерживать предыдущий или следующий пункт от движения на некоторое время. Они будут замедляться, чтобы избежать ощущения, что они движутся одновременно,а также будем использовать .animate() and window.setTimeout.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$.each(item, function() { var i = $(this).index(); var delay = i * 100; window.setTimeout(function (index) { return function () { item.eq(index).stop().animate({ 'right' : '+='+itemToSlide+'em' }, function() { if(index >= itemSize-1) onMoving = false; }); }; } (i), delay); }); |
Обратите внимание, что мы создали частные функции внутри window.setTimeout. Эта работа направлена, чтобы указать функции .animate() перемещения правильный пункт, так как мы объявив их внутри функции $.each().
Что мы имеем?
Мы успешно создали слайдер картинок JQuery, и теперь мы можем реализовать эту технику и для вертикальном направления, изменив направление для анимации. Наслаждайтесь и поделиться своими мыслями. Спасибо! 
Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока:
Перевел: Владислав Бондаренко
