Pull to refresh

Создание слайдеров с анимированной прокруткой, используя Javascript

Reading time 4 min
Views 14K
В этой статье я хотел бы поделиться своими практическими наработками в создании анимированных слайдеров, используя JavaScript.

Идея слайдера заключает в том, что он может содержать в себе немалое количество информации, имея при этом довольно компактные размеры и предоставляя удобный способ просмотра находящихся в нём данных.

Совсем недавно, выполняя работу по вёрстке, мне необходимо было сделать блок ленты новостей с плавной прокруткой заголовков вправо/влево (при нажатии соответствующих кнопок). Для решения этой задачи я написал довольно простой скрипт, реализующий анимацию прокрутки.

Не знаю почему, но тема со слайдерами меня очень заинтересовала, поэтому в своё свободное время я продолжил работу в этом направлении. В результате, после ряда тестов, программная реализация анимации прокрутки была значительно улучшена.

Результатом моей работы является небольшой скрипт, подключаемый к странице, на которой расположен слайдер (или несколько слайдеров).

Всё, что необходимо для того, чтобы слайдер заработал, — создать соответствующий объект, передав в его конструктор идентификатор блока, в котором расположены слайды, и прописать в обработчиках событий контролов, инициирующих прокрутку, вызов соответствующих методов созданного объекта.

Вот как это выглядит на практике:
Практический пример
Рабочий пример доступен по этому адресу. Также есть версия в архиве.

Требования к структуре и стилевому оформлению слайдера будут подробно описаны далее в статье. Они несложные, но их выполнение необходимо для правильной работы механизма анимации прокрутки.

Структура и стилевое оформление


За основу я возьму приведённый выше пример, в котором слайдер имеет такой вид:

Вид слайдер
Раскроем внутреннее устройство слайдера (установив свойство overflow блока sample-slider и списка slides в visible) и определим требования к структуре и стилевому оформлению:

Структура слайдера
И так, слайды должны быть представлены в виде элементов упорядоченного или неупорядоченного списка и позиционироваться друг за другом горизонтально слева на право.

Первый элемент списка — особый. Он не видим для пользователя, однако анимация прокрутки слайдов реализуется за счёт манипуляций с шириной этого элемента.

Первый элемент в списке слайдов
Список вкладывается в блок слайдера. Его размеры должны быть подобраны таким образом, чтобы в одной горизонтальной линии (клиентской области списка) помещалось как минимум число слайдов, на одно большее количества отображаемых слайдов, плюс первый невидимый элемент списка. Так, в моём примере в слайдере отображается три элемента, а во вложенном списке — пять (четыре слайда плюс первый особый элемент).

Список слайдов
Сам же список должен быть смещён влево, чтобы полностью скрыть первый элемент с левой стороны, и как минимум один слайд — с правой.

Это делается для того, чтобы во время прокрутки уходящий слайд постепенно исчезал, а приходящий — постепенно появлялся.

Последнее, но очень важное требование, относится к стилевому оформлению первого элемента в списке слайдов. Он не должен содержать с правой и с левой сторон внутренние отступы и рамку, а его размер необходимо подобрать таким образом, чтобы, при обнулении ширины этого элемента, первый слайд полностью уходил влево, а второй — становился на место первого.

Первый элемент с обнулённой шириной

Программный интерфейс


Рассмотрим конструктор объекта Slider. В качестве обязательного аргумента он принимает идентификатор блока, в который вложен список со слайдами.

Также помимо обязательного, конструктор может принимать ещё два опциональных аргумента, определяющих плавность и скорость прокрутки: shift и delay.

В итоге, функция-конструктор имеет такой вид:
Конструктор объекта Slider

Ниже перечислены случаи, когда объект слайдера не будет создан (вместо него конструктор вернёт пустой объект):
  • Указан идентификатор несуществующего элемента.
  • Блок с указанным идентификатором не содержит дочерних элементов списка, либо их количество не больше трёх (минимальное количество слайдов — два, плюс первый особый элемент списка).
  • Ширина первого элемента списка равна нулю, либо не больше установленного смещения (shiftDelay).
Что же касается опциональных параметров конструктора, в случае, когда передаётся некорректное значение, просто используются установки по-умолчанию.

Ниже приведён список методов объекта Slider (в алфавитном порядке):
Метод Описание
getIdentifier Возвращает идентификатор HTML-элемента (слайдера), с которым связан данный объект.
getMaxShiftDelay Возвращает максимальную временную задержку (в миллисекундах) перед началом нового этапа цикла анимации прокрутки.
getMaxShiftOffset Возвращает размер (в пикселях) максимального смещения слайдов за один этап цикла анимации прокрутки.
getMinShiftDelay Возвращает минимальную временную задержку (в миллисекундах) перед началом нового этапа цикла анимации прокрутки.
getMinShiftOffset Возвращает размер (в пикселях) минимального смещения слайдов за один этап цикла анимации прокрутки.
getMoverWidth Возвращает текущую ширину (в пикселях) первого элемента в списке.
Используется в основном описанными в прототипе функциями, осуществляющими прокрутку слайдов.
getShiftDelay Возвращает установленную временную задержку (в миллисекундах) перед началом нового этапа цикла анимации прокрутки.
Используется в основном описанными в прототипе функциями, осуществляющими прокрутку слайдов.
getShiftOffset Возвращает размер (в пикселях) установленного смещения слайдов за один этап цикла анимации прокрутки.
Используется в основном описанными в прототипе функциями, осуществляющими прокрутку слайдов.
slideLeft Перелистывает слайды таким образом, что новый слайд появляется с левой стороны (т.е. фактически слайды смещаются вправо, чтобы новый контент появился слева).
slideRight Перелистывает слайды таким образом, что новый слайд появляется с правой стороны (т.е. фактически слайды смещаются влево, чтобы новый контент появился справа).
Обратите внимание, что, если необходимо изменить значения по-умолчанию, определяющие плавность и скорость анимации прокрутки слайдов (offset и delay), необходимо передать соответствующие параметры в конструктор объекта.

Результаты тестирований


Описанная выше реализация слайдера была успешно протестирована в следующих браузерах (в операционной системе Windows 7 RTM):
  • Mozilla Firefox 3.5.2
  • Google Chrome 2.0.172.39
  • Opera 9.64
  • Microsoft Internet Explorer 8.0.7600.16385 (в режимах IE7 и IE8)
Помимо этого, пример работает в Microsoft Internet Explorer 6.0.2900.5512 (Windows XP Professional SP3) и в Opera 8.65.2779 (с режимом display, установленном в desktop) в Windows Mobile 6.1 Professional.

Благодарности


Выражаю благодарность следующим людям (FuN_ViT, Parkim) за помощь в решении проблемы с вёрсткой примера под браузеры Internet-Explorer версии ниже 8-ой.
Tags:
Hubs:
+62
Comments 48
Comments Comments 48

Articles