Последовательный слайдер картинок JQuery | Vladmaxi.net
ГлавнаяВеб-разработчикуJQueryПоследовательный слайдер картинок JQuery
Дата: 23.05.2013 в 19:40 | Просмотров: 3222

Последовательный слайдер картинок JQuery

слайдер картинок JQuery
Скачатьбесплатно с сервера
Демодемонстрация

Приветствую, уважаемый гость или постоянный посетитель нашего сайта! Иногда для отображения картинок (или товаров, но мы описываем их как картинки) необходимо, чтобы каждый пункт скользил последовательно, а не сдвигался целой группой. В этом уроке мы будем создавать слайдер картинок JQuery, с помощью JavaScript функции window.setTimeout для работы анимации каждого элемента слайдера.

В этом уроке пойдет речь о том, как создать простой слайдер jquery. приглашаю посмотреть статью о том, как создать слайдер товаров для интернет магазина.

Техническая часть HTML & CSS

Картинки будут отображаться горизонтально и всего мы имеем 6 пунктов в слайдере. В качестве примера изображений мы используем вкусный набор иконок от Smashing Magazine, созданный Iconeden. Кнопки управления слайдером “Вперед” и “Назад” размещены соответственно на правой и левой стороне списка картинок. Вот наша любимая html разметка и стили css:

Ничего сложно здесь нет, в общем-то стандартная структура для списка и некоторые необходимые стили для слайдера. В итоге мы имеем следующее:

слайдер картинок JQuery

Инициализация переменных

Первое, что мы делаем, это инициализация всех переменных. Они будут доступны для кнопок “вперед” и “назад” соответственно.

Добавление события нажатия

Теперь мы добавим событие нажатия на кнопки предыдущий и следующий, для смены картинок слайдера. После окончания картинок слайдера, кнопка просто становится неактивной.

Последовательность переменных

Чтобы сделать перемещение каждого элемента последовательным, мы должны получить доступ к каждому элементу с помощью функции $.each(). При обращении к каждому пункту мы будем двигать его, но при этом удерживать предыдущий или следующий пункт от движения на некоторое время. Они будут замедляться, чтобы избежать ощущения, что они движутся одновременно,а также будем использовать .animate() and window.setTimeout.

Обратите внимание, что мы создали частные функции внутри window.setTimeout. Эта работа направлена​​, чтобы указать функции .animate() перемещения правильный пункт, так как мы объявив их внутри функции $.each().

Что мы имеем?

Мы успешно создали слайдер картинок JQuery, и теперь мы можем реализовать эту технику и для вертикальном направления, изменив направление для анимации. Наслаждайтесь и поделиться своими мыслями. Спасибо! ;)


Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока: http://www.webstuffshare.com
Перевел: Владислав Бондаренко


Добавить комментарий