<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Слайдер</title>
<style type="text/css">
section, nav {
display: flex;
justify-content: center;
}
section {
height: 300px;
}
section img {
display: block;
height: 300px;
}
nav {
width: 50%;
margin: 30px auto auto;
}
nav div {
width: 20pt;
height: 20pt;
font-size: 20pt;
line-height: 20pt;
text-align: center;
margin: auto 10px;
border: thin solid grey;
color: black;
background-color: white;
cursor: pointer;
}
nav div.active {
color: white;
background-color: black;
cursor: auto;
}
</style>
</head>
<body>
<section>
<img id="output" src="images/1.jpg">
</section>
<nav>
<div id="1" class="active">1</div>
<div id="2">2</div>
<div id="3">3</div>
</nav>
</body>
<script type="text/javascript">
const output = window.document.getElementById('output');
const buttons = window.document.querySelectorAll('nav div');
let current = buttons[0];
function showImage() {
current = this;
output.src = 'images/' + this.id + '.jpg';
buttons.forEach((el) => {
if (el == this)
el.className = 'active';
else
el.className = '';
});
}
buttons.forEach(
(el) => {
el.addEventListener('click', showImage);
}
);
</script>
</html>
6.2. События, поддерживаемые элементами страницы
Элементы страницы поддерживают весьма много событий. В таблице ниже приведены только основные.
Таблица 6.1. Основные события, поддерживаемые элементами страницы
| Имя события | Когда возникает? |
|---|---|
| События мыши | |
| click | Щелчок мышью |
| dblclick | Двойной щелчок мышью |
| contextmenu | Щелчок правой кнопкой мыши перед выводом контекстного меню |
| mousedown | Нажатие кнопки мыши |
| mouseup | Отпускание кнопки мыши |
| mouseenter | Наведение курсора мыши на элемент страницы* |
| mouseover | Перемещение курсора мыши на элементе страницы |
| mouseleave | Увод курсора мыши с элемента страницы* |
| mouseout | Увод курсора мыши с элемента страницы |
| wheel | Прокрутка колесика мыши |
| События клавиатуры | |
| keydown | Нажатие любой клавиши |
| keypress | Нажатие алфавитно-цифровой клавиши |
| keyup | Отпускание нажатой ранее клавиши |
| Событие буфера обмена | |
| copy | Копирование выделенного текста |
| События CSS-анимации | |
| transitionend | Конец воспроизведения анимации с двумя состояниями (создаваемой атрибутами стиля семейства transition) |
| animationstart | Начало воспроизведения анимации с несколькими состояниями (атрибут animation) |
| animationiteration | Завершено очередное повторение анимации |
| animationend | Конец воспроизведения анимации |
| Прочие события | |
| scroll | Прокрутка содержимого элемента страницы (если это элемент с прокруткой) |
| События тела страницы | |
| load | После загрузки страницы |
| pageshow | После загрузки страницы и события load |
| resize | При изменении размера окна |
| beforeunload | Перед уходом со страницы |
| pagehide | При уходе со страницы |
| beforeprint | Перед открытием окна печати |
| afterprint | После закрытия окна печати |
| hashchange | При переходе на другой якорь |
* Эти два события возникают при одинаковых условиях, но отличаются по количеству фаз их «прохождения». Подробно о фазах событий рассказано в разд. 6.4.
Чаще всего обрабатываются события мыши и клавиатуры. Остальные события, в особенности события тела страницы, обрабатываются гораздо реже и в специальных случаях.