В этой статье я хотел бы поделиться своим практическим опытом создания анимированных слайдеров с помощью JavaScript. Идея слайдера заключается в том, что он может содержать значительный объем информации, при этом будучи достаточно компактным по размеру и обеспечивая удобный способ просмотра содержащихся в нем данных.
Совсем недавно, занимаясь версткой, мне понадобилось создать блок новостной ленты с плавной прокруткой заголовков вправо/влево (при нажатии соответствующих кнопок).
Для решения этой проблемы я написал достаточно простой скрипт, реализующий анимацию прокрутки.
Не знаю почему, но тема со слайдерами меня очень заинтересовала, поэтому в свободное время я продолжал работать в этом направлении.
В результате после серии тестов программная реализация анимации прокрутки была существенно улучшена.
Результатом моей работы является небольшой скрипт, который подключается к странице, на которой расположен слайдер (или несколько слайдеров).
Все что необходимо для работы слайдера — создать соответствующий объект, передав его конструктору идентификатор блока, в котором находятся слайды, и прописать в обработчиках событий элементов управления, инициирующих прокрутку, для вызова соответствующих методов.
созданного объекта.
Вот как это выглядит на практике:
Рабочий пример доступен здесь.
адрес .
Также есть версия архив .
Требования к структуре и стилю слайдера будут подробно описаны далее в статье.
Они просты, но их реализация необходима для корректной работы механизма анимации прокрутки.
Структура и стиль
За основу я возьму приведенный выше пример, в котором слайдер выглядит следующим образом:
Раскроем внутреннюю структуру слайдера (установив свойство переполнение блокировать образец-слайдер и список слайды В видимый ) и определить требования к структуре и стилю:
Итак, слайды должны быть представлены как элементы упорядоченного или неупорядоченного списка и расположены друг за другом горизонтально слева направо.
Первый элемент списка является особенным.
Он не виден пользователю, но анимация прокрутки слайда реализуется за счет манипулирования шириной этого элемента.
Список вложен в блок слайдера.
Его размеры необходимо подобрать таким образом, чтобы одна горизонтальная линия (клиентская область списка) содержала как минимум количество слайдов, равное на один больше количества отображаемых слайдов, плюс первый невидимый элемент списка.
Итак, в моем примере в слайдере отображается три элемента, а во вложенном списке — пять (четыре слайда плюс первый специальный элемент).
Сам список следует сместить влево, чтобы полностью скрыть первый элемент слева и хотя бы один слайд справа.
Это сделано для того, чтобы при прокрутке исходящий слайд постепенно исчезал, а входящий постепенно появлялся.
Последнее, но очень важное требование касается оформления первого элемента в списке слайдов.
Он не должен содержать внутренних отступов и рамки с правой и левой стороны, а его размер необходимо подобрать таким образом, чтобы при сбросе ширины этого элемента первый слайд полностью уходил влево, а второй слайд занимал место первое.
Программный интерфейс
Рассмотрим конструктор объекта Слайдер .В качестве обязательного аргумента принимает идентификатор блока, в который вложен список слайдов.
Также, помимо обязательного, конструктор может принимать еще два необязательных аргумента, определяющих плавность и скорость прокрутки: сдвиг И задерживать .
В результате функция-конструктор выглядит так:
Ниже приведены случаи, когда объект ползунка не будет создан (вместо этого конструктор вернет пустой объект):
- Был указан идентификатор несуществующего элемента.
- Блок с указанным идентификатором не содержит дочерних элементов списка или их количество не более трех (минимальное количество слайдов — два плюс первый специальный элемент списка).
- Ширина первого элемента списка равна нулю или не превышает установленного смещения ( сдвигDelay ).
Ниже приведен список методов объекта.
Слайдер (В алфавитном порядке):
| Метод | Описание |
|---|---|
| получитьидентификатор | Возвращает идентификатор элемента HTML (слайдера), с которым связан этот объект. |
| getMaxShiftDelay | Возвращает максимальную задержку (в миллисекундах) перед началом нового этапа цикла анимации прокрутки.
|
| getMaxShiftOffset | Возвращает размер максимального смещения слайда на этапе цикла анимации прокрутки в пикселях.
|
| getMinShiftDelay | Возвращает минимальную задержку (в миллисекундах) перед началом нового этапа цикла анимации прокрутки.
|
| getMinShiftOffset | Возвращает размер минимального смещения слайда на этапе цикла анимации прокрутки в пикселях.
|
| getMoverWidth | Возвращает текущую ширину (в пикселях) первого элемента в списке.
В основном он используется функциями, описанными в прототипе, которые прокручивают слайды.
|
| getShiftDelay | Возвращает указанную задержку (в миллисекундах) перед началом нового этапа цикла анимации прокрутки.
В основном он используется функциями, описанными в прототипе, которые прокручивают слайды.
|
| getShiftOffset | Возвращает размер (в пикселях) заданного смещения слайда за один шаг цикла анимации прокрутки.
В основном он используется функциями, описанными в прототипе, которые прокручивают слайды.
|
| слайд влево | Переворачивает слайды так, чтобы новый слайд отображался слева (то есть фактически слайды перемещаются вправо, чтобы новое содержимое отображалось слева).
|
| слайд вправо | Переворачивает слайды так, чтобы новый слайд отображался справа (то есть фактически слайды перемещаются влево, чтобы новое содержимое отображалось справа).
|
Результаты теста
Описанная выше реализация слайдера была успешно протестирована в следующих браузерах (в операционной системе Windows 7 первоначальная версия ):- Мозилла Фаерфокс 3.5.2
- Гугл Хром 2.0.172.39
- Опера 9.64
- Microsoft Internet Explorer 8.0.7600.16385 (в режимах IE7 И IE8 )
Благодарности
Выражаю благодарность следующим людям( ФуН_ВиТ , Парким ) за помощь в решении проблемы с версткой примера для браузеров Internet Explorer версии ниже 8. Теги: #JavaScript #slider #анимированная прокрутка #slider #анимированная прокрутка #JavaScript
-
Энигматис: Призраки Мэйпл-Крик
19 Oct, 24 -
Я Хочу. У Меня Есть. Я Люблю
19 Oct, 24 -
Определите Автора Поста В Комментариях
19 Oct, 24 -
Миграция Настольных Приложений На .Net Core
19 Oct, 24 -
Лучшие Практики Для Поисковой Выдачи
19 Oct, 24
