Сериалы Вам

Пример кода для просмотра фотографий с кнопками "Следующее" и "Предыдущее"

Если вам нужно создать галерею фотографий с возможностью просмотра следующей и предыдущей фотографии, то можно использовать следующий пример кода.

HTML разметка

<div class="gallery">
  <button id="prev-btn">Предыдущее</button>
  <img id="image" src="1.jpg">
  <button id="next-btn">Следующее</button>
</div>

CSS стили

.gallery {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

#prev-btn,
#next-btn {
  background: #000;
  color: #fff;
  border: none;
  padding: 10px;
  margin: 10px;
  cursor: pointer;
}

#image {
  max-width: 100%;
  height: auto;
}

JavaScript код

const images = [
  '1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg'
];

let currentImage = 0;

const imageElement = document.getElementById('image');
const prevButton = document.getElementById('prev-btn');
const nextButton = document.getElementById('next-btn');

function updateImage() {
  imageElement.src = images[currentImage];
}

function nextImage() {
  currentImage++;
  if (currentImage >= images.length) {
    currentImage = 0;
  }
  updateImage();
}

function prevImage() {
  currentImage--;
  if (currentImage < 0) {
    currentImage = images.length - 1;
  }
  updateImage();
}

nextButton.addEventListener('click', nextImage);
prevButton.addEventListener('click', prevImage);

updateImage();

Разбор кода

  1. Массив images содержит список путей к изображениям.
  2. Переменная currentImage содержит индекс текущей фотографии.
  3. Кнопки "Следующее" и "Предыдущее" выбираются с помощью метода getElementById.
  4. Функция updateImage обновляет путь к изображению в img теге на странице.
  5. Функции nextImage и prevImage изменяют переменную currentImage и вызывают функцию updateImage.
  6. Обработчики событий click добавлены к кнопкам "Следующее" и "Предыдущее".
  7. Функция updateImage вызывается при загрузке страницы для отображения первой фотографии.

Выводы

Этот простой пример кода демонстрирует, как можно создать галерею фотографий с помощью JavaScript. Каждый раз, когда пользователь нажимает кнопки "Следующее" или "Предыдущее", код изменяет текущую фотографию и обновляет изображение на странице. Теперь вы можете использовать этот пример для создания своей собственной галереи фотографий с кнопками для быстрого перемещения между изображениями.