Лабораторные работы / Лабораторная работа 7

Лабораторная работа 7

Обработка событий

Задание:

1. Реализовать открытие и закрытие модальных окон (форма входа, окно с картой).

2. Анимировать фотогалерею.

Справочная информация:

• https://learn.javascript.ru/ - учебник javascript

• https://learn.javascript.ru/events – события

• https://learn.javascript.ru/mouse-events-basics - события мыши

• https://learn.javascript.ru/styles-and-classes - классы

• https://learn.javascript.ru/settimeout-setinterval - таймеры

• https://learn.javascript.ru/dom-attributes-and-properties - атрибуты

Рекомендации к выполнению:

Продолжается работа с сайтом тату-салона.

1. Создать новый файл main.js в папке js и подключить этот файл в index.html, используя тег <script>.

2. Добавить кнопкам «Вход» и «Как проехать» слушатель событий, ожидающий нажатия левой кнопки мыши. Вызываемая функция должна будет добавить класс .modal-show соответствующему модальному окну (предварительно следует задать этому классу стили в файле .css, которые разместят модальное окно поверх основной информации).

3. Добавить слушатели кнопкам закрытия модальных окон – убрать класс .modal-show.

4. Аналогично реализовать переключение изображений в фотогалерее: отображать только один элемент img, по нажатию кнопок «Назад» и «Вперёд» перемещать класс .active-img другому элементу.

Дополнительное задание:

1. Добавить переключение изображений по таймеру один раз в 10 секунд.

2. Для модальных окон реализовать открытие по нажатию кнопки «Enter», если кнопки «Вход» или «Как проехать» находятся в фокусе, и закрытие по кнопке «Esc», если модальное окно открыто.