Задание заключается в создании массива из 10 изображений и реализации их последовательного просмотра через веб-страницу с помощью гиперссылок «вперёд» и «назад»

Условие:

Код. Javascript

Решение:

### Предмет: Программирование ### Раздел: JavaScript — работа с массивами и элементами HTML Задание заключается в создании массива из 10 изображений и реализации их последовательного просмотра через веб-страницу с помощью гиперссылок «вперёд» и «назад». ## Шаги для выполнения: 1. Нам нужно создать массив изображений. 2. Написать функцию для последовательного переключения изображений при нажатии на ссылки «вперёд» и «назад». 3. Реализовать это на веб-странице с HTML и JavaScript. ### Пример решения: #### 1. HTML структура: ```html Просмотр изображений

Просмотр изображений

``` #### 2. JavaScript (файл `script.js`): ```javascript // Массив изображений const images = [ 'image1.jpg', 'image2.jpg', 'image3.jpg', 'image4.jpg', 'image5.jpg', 'image6.jpg', 'image7.jpg', 'image8.jpg', 'image9.jpg', 'image10.jpg' ]; // Индекс текущего изображения let currentImageIndex = 0; // Получаем элемент изображения const imageElement = document.getElementById('currentImage'); // Функция для показа изображения function showImage(index) { imageElement.src = images[index]; } // Обработчик для ссылки "назад" document.getElementById('prevLink').addEventListener('click', function(event) { event.preventDefault(); // Предотвращаем стандартное действие ссылки currentImageIndex = (currentImageIndex - 1 + images.length) % images.length; // Для цикла назад showImage(currentImageIndex); // Показываем предыдущее изображение }); // Обработчик для ссылки "вперёд" document.getElementById('nextLink').addEventListener('click', function(event) { event.preventDefault(); // Предотвращаем стандартное действие ссылки currentImageIndex = (currentImageIndex + 1) % images.length; // Для цикла вперёд showImage(currentImageIndex); // Показываем следующее изображение }); // Изначально показываем первое изображение showImage(currentImageIndex); ``` --- ### Подробное объяснение: 1. **HTML файл**: - Мы создаем базовую структуру веб-страницы с тегами `` для отображения текущего изображения и теги `` для ссылок «назад» и «вперёд». - Тег `` имеет атрибут `src`, который указывает на изображение, и атрибут `id`, по которому мы будем его изменять через JavaScript. 2. **Массив изображений (`image1.jpg`, `image2.jpg`, и т. д.)**: - В JavaScript файле создается массив имен файлов изображений. Далее эти изображения поочередно будут показываться на странице. 3. **Переключение между изображениями**: - Используем индекс `currentImageIndex`, который определяет текущее отображаемое изображение. - Если нажать «назад», то индекс уменьшается, а если «вперёд» — увеличивается. - Чтобы изображения переходили циклически, в ссылках «вперёд» и «назад» мы используем операции с модулем (`%`), чтобы не выйти за пределы массива. 4. **Предотвращение стандартного действия ссылок**: - С помощью `event.preventDefault()` мы предотвращаем стандартное поведение ссылок, чтобы страница не перезагружалась и просто изменялось изображение. ### Результат: На веб-странице последовательно можно просматривать изображения, нажимая на ссылки «вперёд» и «назад».