Интерактивные галереи являются важной частью современных веб-сайтов, позволяя разработчикам создавать увлекательные визуальные презентации для фотографий и изображений. В этой статье мы рассмотрим, как создать интерактивную галерею с использованием 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`.

РОССИЙСКИЕ НЕЙРОСЕТИ ДЛЯ ЖИЗНИ И КАРЬЕРЫ В 2025
Присоединяйся к онлайн-вебинару. В прямом эфире разберем и потестируем лучшие на сегодняшний день отечественные ИИ!
Вебинар включает:
  • Выполним базовые задачи на российских нейросетях и посмотрим на результаты!
  • Файл-инструкцию «Как сделать нейро-фотосессию из своего фото бесплатно, без иностранных карт и прочих сложностей»
  • 10 способов заработать на нейросетях: Посмотрим рынок вакансий и поймем, где навыки ИИ дадут наибольший профит
Участвовать бесплатно

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

Чтобы сделать проект еще более интересным, вы можете добавить эффекты при переключении и индикатор, показывающий текущее изображение. Стили и код 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();

«`

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

ОНЛАЙН-ПРАКТИКУМ
ЗАПУСК нейросети DEEPSEEK R1 ЛОКАЛЬНО НА СВОЕМ КОМПЬЮТЕРЕ
ЧТО БУДЕТ НА ОБУЧЕНИИ?
  • ПОКАЖЕМ, КАК РАЗВЕРНУТЬ МОДЕЛЬ нейросети DEEPSEEK R1 ПРЯМО НА СВОЁМ КОМПЬЮТЕРЕ
  • Где и как применять? Потестируем модель после установки на разных задачах
  • Как дообучить модель под себя?
Участвовать бесплатно

Заключение

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

РОССИЙСКИЕ НЕЙРОСЕТИ ДЛЯ ЖИЗНИ И КАРЬЕРЫ В 2025
Присоединяйся к онлайн-вебинару.
В прямом эфире разберем и потестируем лучшие на сегодняшний день отечественные ИИ!
Вы узнаете о том:
  • Выполним базовые задачи на российских нейросетях и посмотрим на результаты!
  • Файл-инструкцию «Как сделать нейро-фотосессию из своего фото бесплатно, без иностранных карт и прочих сложностей»
  • Покажем 10+ способов улучшить свою жизнь с ИИ каждому — от ребенка и пенсионера до управленца и предпринимателя
Участвовать бесплатно
ОБЗОРНЫЙ ПРАКТИКУМ ПО НАШУМЕВШИМ НЕЙРОСЕТЯМ
Нейросети DEEPSEEK И QWEN
За 2 часа сделаем полный обзор новых мощных ИИ-моделей, которые бросают вызов нейросети ChatGPT
Вы узнаете:
  • Возможность получить Доступ в Нейроклуб на целый месяц
  • Как ИИ ускоряет работу и приносит деньги
  • За 2 часа вы получите четкий план, как начать работать с ИИ прямо сейчас!
Участвовать бесплатно

Большой практикум
ЗАМЕНИ ВСЕ НЕЙРОСЕТИ НА ОДНУ — PERPLEXITY
ПОКАЖЕМ НА КОНКРЕТНЫХ КЕЙСАХ
  • Освой нейросеть Perplexity и узнай, как пользоваться функционалом остальных ИИ в одном
  • УЧАСТВОВАТЬ ЗА 0 РУБ.
  • Расскажем, как получить подписку
Участвовать бесплатно
ОНЛАЙН-ПРАКТИКУМ
ЗАПУСК нейросети DEEPSEEK R1 ЛОКАЛЬНО НА СВОЕМ КОМПЬЮТЕРЕ
ЧТО БУДЕТ НА ОБУЧЕНИИ?
  • ПОКАЖЕМ, КАК РАЗВЕРНУТЬ МОДЕЛЬ нейросеть DEEPSEEK R1 ПРЯМО НА СВОЁМ КОМПЬЮТЕРЕ
Участвовать бесплатно