В этой статье я хотел бы поделиться своими практическими наработками в создании анимированных слайдеров, используя JavaScript.
Идея слайдера заключает в том, что он может содержать в себе немалое количество информации, имея при этом довольно компактные размеры и предоставляя удобный способ просмотра находящихся в нём данных.
Совсем недавно, выполняя работу по вёрстке, мне необходимо было сделать блок ленты новостей с плавной прокруткой заголовков вправо/влево (при нажатии соответствующих кнопок). Для решения этой задачи я написал довольно простой скрипт, реализующий анимацию прокрутки.
Не знаю почему, но тема со слайдерами меня очень заинтересовала, поэтому в своё свободное время я продолжил работу в этом направлении. В результате, после ряда тестов, программная реализация анимации прокрутки была значительно улучшена.
Результатом моей работы является небольшой скрипт, подключаемый к странице, на которой расположен слайдер (или несколько слайдеров).
Всё, что необходимо для того, чтобы слайдер заработал, — создать соответствующий объект, передав в его конструктор идентификатор блока, в котором расположены слайды, и прописать в обработчиках событий контролов, инициирующих прокрутку, вызов соответствующих методов созданного объекта.
Вот как это выглядит на практике:
Требования к структуре и стилевому оформлению слайдера будут подробно описаны далее в статье. Они несложные, но их выполнение необходимо для правильной работы механизма анимации прокрутки.
За основу я возьму приведённый выше пример, в котором слайдер имеет такой вид:
Раскроем внутреннее устройство слайдера (установив свойство overflow блока sample-slider и списка slides в visible) и определим требования к структуре и стилевому оформлению:
И так, слайды должны быть представлены в виде элементов упорядоченного или неупорядоченного списка и позиционироваться друг за другом горизонтально слева на право.
Первый элемент списка — особый. Он не видим для пользователя, однако анимация прокрутки слайдов реализуется за счёт манипуляций с шириной этого элемента.
Список вкладывается в блок слайдера. Его размеры должны быть подобраны таким образом, чтобы в одной горизонтальной линии (клиентской области списка) помещалось как минимум число слайдов, на одно большее количества отображаемых слайдов, плюс первый невидимый элемент списка. Так, в моём примере в слайдере отображается три элемента, а во вложенном списке — пять (четыре слайда плюс первый особый элемент).
Сам же список должен быть смещён влево, чтобы полностью скрыть первый элемент с левой стороны, и как минимум один слайд — с правой.
Это делается для того, чтобы во время прокрутки уходящий слайд постепенно исчезал, а приходящий — постепенно появлялся.
Последнее, но очень важное требование, относится к стилевому оформлению первого элемента в списке слайдов. Он не должен содержать с правой и с левой сторон внутренние отступы и рамку, а его размер необходимо подобрать таким образом, чтобы, при обнулении ширины этого элемента, первый слайд полностью уходил влево, а второй — становился на место первого.
Рассмотрим конструктор объекта Slider. В качестве обязательного аргумента он принимает идентификатор блока, в который вложен список со слайдами.
Также помимо обязательного, конструктор может принимать ещё два опциональных аргумента, определяющих плавность и скорость прокрутки: shift и delay.
В итоге, функция-конструктор имеет такой вид:
Ниже перечислены случаи, когда объект слайдера не будет создан (вместо него конструктор вернёт пустой объект):
Ниже приведён список методов объекта Slider (в алфавитном порядке):
Обратите внимание, что, если необходимо изменить значения по-умолчанию, определяющие плавность и скорость анимации прокрутки слайдов (offset и delay), необходимо передать соответствующие параметры в конструктор объекта.
Описанная выше реализация слайдера была успешно протестирована в следующих браузерах (в операционной системе Windows 7 RTM):
Выражаю благодарность следующим людям (FuN_ViT, Parkim) за помощь в решении проблемы с вёрсткой примера под браузеры Internet-Explorer версии ниже 8-ой.
Идея слайдера заключает в том, что он может содержать в себе немалое количество информации, имея при этом довольно компактные размеры и предоставляя удобный способ просмотра находящихся в нём данных.
Совсем недавно, выполняя работу по вёрстке, мне необходимо было сделать блок ленты новостей с плавной прокруткой заголовков вправо/влево (при нажатии соответствующих кнопок). Для решения этой задачи я написал довольно простой скрипт, реализующий анимацию прокрутки.
Не знаю почему, но тема со слайдерами меня очень заинтересовала, поэтому в своё свободное время я продолжил работу в этом направлении. В результате, после ряда тестов, программная реализация анимации прокрутки была значительно улучшена.
Результатом моей работы является небольшой скрипт, подключаемый к странице, на которой расположен слайдер (или несколько слайдеров).
Всё, что необходимо для того, чтобы слайдер заработал, — создать соответствующий объект, передав в его конструктор идентификатор блока, в котором расположены слайды, и прописать в обработчиках событий контролов, инициирующих прокрутку, вызов соответствующих методов созданного объекта.
Вот как это выглядит на практике:
Рабочий пример доступен по этому адресу. Также есть версия в архиве.
Требования к структуре и стилевому оформлению слайдера будут подробно описаны далее в статье. Они несложные, но их выполнение необходимо для правильной работы механизма анимации прокрутки.
Структура и стилевое оформление
За основу я возьму приведённый выше пример, в котором слайдер имеет такой вид:
Раскроем внутреннее устройство слайдера (установив свойство overflow блока sample-slider и списка slides в visible) и определим требования к структуре и стилевому оформлению:
И так, слайды должны быть представлены в виде элементов упорядоченного или неупорядоченного списка и позиционироваться друг за другом горизонтально слева на право.
Первый элемент списка — особый. Он не видим для пользователя, однако анимация прокрутки слайдов реализуется за счёт манипуляций с шириной этого элемента.
Список вкладывается в блок слайдера. Его размеры должны быть подобраны таким образом, чтобы в одной горизонтальной линии (клиентской области списка) помещалось как минимум число слайдов, на одно большее количества отображаемых слайдов, плюс первый невидимый элемент списка. Так, в моём примере в слайдере отображается три элемента, а во вложенном списке — пять (четыре слайда плюс первый особый элемент).
Сам же список должен быть смещён влево, чтобы полностью скрыть первый элемент с левой стороны, и как минимум один слайд — с правой.
Это делается для того, чтобы во время прокрутки уходящий слайд постепенно исчезал, а приходящий — постепенно появлялся.
Последнее, но очень важное требование, относится к стилевому оформлению первого элемента в списке слайдов. Он не должен содержать с правой и с левой сторон внутренние отступы и рамку, а его размер необходимо подобрать таким образом, чтобы, при обнулении ширины этого элемента, первый слайд полностью уходил влево, а второй — становился на место первого.
Программный интерфейс
Рассмотрим конструктор объекта Slider. В качестве обязательного аргумента он принимает идентификатор блока, в который вложен список со слайдами.
Также помимо обязательного, конструктор может принимать ещё два опциональных аргумента, определяющих плавность и скорость прокрутки: shift и delay.
В итоге, функция-конструктор имеет такой вид:
Ниже перечислены случаи, когда объект слайдера не будет создан (вместо него конструктор вернёт пустой объект):
- Указан идентификатор несуществующего элемента.
- Блок с указанным идентификатором не содержит дочерних элементов списка, либо их количество не больше трёх (минимальное количество слайдов — два, плюс первый особый элемент списка).
- Ширина первого элемента списка равна нулю, либо не больше установленного смещения (shiftDelay).
Ниже приведён список методов объекта Slider (в алфавитном порядке):
| Метод | Описание |
|---|---|
| getIdentifier | Возвращает идентификатор HTML-элемента (слайдера), с которым связан данный объект. |
| getMaxShiftDelay | Возвращает максимальную временную задержку (в миллисекундах) перед началом нового этапа цикла анимации прокрутки. |
| getMaxShiftOffset | Возвращает размер (в пикселях) максимального смещения слайдов за один этап цикла анимации прокрутки. |
| getMinShiftDelay | Возвращает минимальную временную задержку (в миллисекундах) перед началом нового этапа цикла анимации прокрутки. |
| getMinShiftOffset | Возвращает размер (в пикселях) минимального смещения слайдов за один этап цикла анимации прокрутки. |
| getMoverWidth | Возвращает текущую ширину (в пикселях) первого элемента в списке. Используется в основном описанными в прототипе функциями, осуществляющими прокрутку слайдов. |
| getShiftDelay | Возвращает установленную временную задержку (в миллисекундах) перед началом нового этапа цикла анимации прокрутки. Используется в основном описанными в прототипе функциями, осуществляющими прокрутку слайдов. |
| getShiftOffset | Возвращает размер (в пикселях) установленного смещения слайдов за один этап цикла анимации прокрутки. Используется в основном описанными в прототипе функциями, осуществляющими прокрутку слайдов. |
| slideLeft | Перелистывает слайды таким образом, что новый слайд появляется с левой стороны (т.е. фактически слайды смещаются вправо, чтобы новый контент появился слева). |
| slideRight | Перелистывает слайды таким образом, что новый слайд появляется с правой стороны (т.е. фактически слайды смещаются влево, чтобы новый контент появился справа). |
Результаты тестирований
Описанная выше реализация слайдера была успешно протестирована в следующих браузерах (в операционной системе 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)
Благодарности
Выражаю благодарность следующим людям (FuN_ViT, Parkim) за помощь в решении проблемы с вёрсткой примера под браузеры Internet-Explorer версии ниже 8-ой.
