Интерактивные галереи являются важной частью современных веб-сайтов, позволяя разработчикам создавать увлекательные визуальные презентации для фотографий и изображений. В этой статье мы рассмотрим, как создать интерактивную галерею с использованием JavaScript, HTML и CSS. Мы разберем шаги, необходимые для разработки галереи, сделаем переключение между изображениями, создадим кнопки управления, а также сделаем стиль и эффекты для придания уникальности вашей галерее.

Инструкция

Первым шагом в создании интерактивной галереи является разметка HTML. Создайте основную структуру, включая контейнер для изображений и элементы управления. Вот простая разметка для начала:

«`html

<!DOCTYPE html>

<html lang=»en»>

<head>

<meta charset=»UTF-8″>

<meta name=»viewport» content=»width=device-width, initial-scale=1.0″>

<title>Интерактив</title>

<link rel=»stylesheet» href=»styles.css»>

</head>

<body>

<div class=»gallery-container»>

<img src=»image1.jpg» alt=»Изоб. 1″ class=»gallery-image»>

<img src=»image2.jpg» alt=»Изоб. 2″ class=»gallery-image»>

<img src=»image3.jpg» alt=»Изоб. 3″ class=»gallery-image»>

<!— Больше по мере необходимости —>

</div>

<div class=»controls»>

<button id=»prev-btn»>Предыдущее</button>

<button id=»next-btn»>Следующее</button>

</div>

</body>

</html>

«`

Обратите внимание, что мы создали контейнер для изображений и добавили элементы управления в виде кнопок «Предыдущее» и «Следующее».

CSS-стили

Теперь давайте стилизуем нашу галерею с помощью CSS. Создайте файл `styles.css` и сделайте следующие стили:

«`css

/* Основной контейнер*/

.gallery-container {

display: flex;

justify-content: center;

align-items: center;

height: 80vh;

}

/* Стили для картинок*/

.gallery-image {

max-width: 100%;

max-height: 80%;

transition: transform 0.3s ease-in-out;

}

/* Элементы управления */

.controls {

text-align: center;

margin-top: 20px;

}

#prev-btn, #next-btn {

background-color: #007BFF;

color: #fff;

padding: 10px 20px;

border: none;

cursor: pointer;

}

#prev-btn {

margin-right: 10px;

}

«`

Эти стили помогут сделать нашу галерею более привлекательной и функциональной.

Логика на JavaScript

Теперь настало время добавить функциональность с использованием JavaScript. Создайте файл `script.js` и добавьте следующий код:

«`javascript

// Получаем элементы

const galleryContainer = document.querySelector(‘.gallery-container’);

const images = document.querySelectorAll(‘.gallery-image’);

const prevButton = document.getElementById(‘prev-btn’);

const nextButton = document.getElementById(‘next-btn’);

let currentImageIndex = 0;

// Функция для отображения картинки

function showImage(index) {

images.forEach((image, i) => {

if (i === index) {

image.style.transform = ‘scale(1)’;

} else {

image.style.transform = ‘scale(0)’;

}

});

}

// Переключение к предыдущему

function showPreviousImage() {

currentImageIndex = (currentImageIndex — 1 + images.length) % images.length;

showImage(currentImageIndex);

}

// Переключение к следующему

function showNextImage() {

currentImageIndex = (currentImageIndex + 1) % images.length;

showImage(currentImageIndex);

}

// Слушатели событий для кнопок

prevButton.addEventListener(‘click’, showPreviousImage);

nextButton.addEventListener(‘click’, showNextImage);

// Показываем первую картинку

showImage(currentImageIndex);

«`

Этот JavaScript-код позволяет нам переключаться с помощью кнопок «Предыдущее» и «Следующее». Функция `showImage` скрывает все, кроме текущей картинки, путем изменения значения CSS-свойства `transform`.

Делаем красиво

Чтобы сделать проект еще более интересным, вы можете добавить эффекты при переключении и индикатор, показывающий текущее изображение. Стили и код JavaScript:

«`css

/* Эффект при переключении */

.gallery-image {

/* Остальные стили остаются без изменений */

transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out;

}

/* Индикатор текущего изображения */

.image-indicator {

text-align: center;

margin-top: 10px;

}

«`

«`javascript

// Добавление индикатора

const imageIndicator = document.createElement(‘div’);

imageIndicator.classList.add(‘image-indicator’);

galleryContainer.appendChild(imageIndicator);

function updateImageIndicator() {

imageIndicator.innerHTML = `${currentImageIndex + 1} / ${images.length}`;

}

// Обновление индикатора при пер

еключении

function showPreviousImage() {

currentImageIndex = (currentImageIndex — 1 + images.length) % images.length;

showImage(currentImageIndex);

updateImageIndicator();

}

function showNextImage() {

currentImageIndex = (currentImageIndex + 1) % images.length;

showImage(currentImageIndex);

updateImageIndicator();

}

// Показываем текущее и обновляем индикатор

showImage(currentImageIndex);

updateImageIndicator();

«`

Теперь у вас есть эффект при переключении между изображениями и индикатор, который отображает текущий слайд.

Заключение

Создание интерактивной галереи с JavaScript, HTML и CSS может быть увлекательной и практической задачей. Мы рассмотрели основы разработки, начиная с разметки HTML, добавления стилей с помощью CSS, создания JavaScript для переключения между изображениями, а также добавления эффектов и индикатора. Вы можете доработать этот проект и настроить его под свои потребности, добавив дополнительные функции и стили.