如何使用 HTML CSS 和 JavaScript 创建图像灯箱画廊？(1)

📌 相关文章

📜 如何使用 HTML CSS 和 JavaScript 创建图像灯箱画廊？(1)

📅 最后修改于: 2023-12-03 15:23:51.694000 🧑 作者: Mango

如何使用 HTML CSS 和 JavaScript 创建图像灯箱画廊？

图像灯箱画廊是一个非常流行的网页设计功能，它可以帮助你在网页上展示图片，并提供交互式的用户体验。在本文中，我们将介绍如何使用 HTML、CSS 和 JavaScript 来创建一个图像灯箱画廊。

步骤 1 - 设计 HTML 页面

在开始创建我们的图像灯箱画廊之前，我们需要先设计一个基本的 HTML 页面。我们可以使用以下的 HTML 代码片段，来创建一个基本的图像灯箱容器和图片列表：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Image Gallery Lightbox</title>
</head>

<body>
  <div class="gallery-container">
    <div class="gallery">
      <ul>
        <li>
          <img src="images/image1.jpg">
        </li>
        <li>
          <img src="images/image2.jpg">
        </li>
        <li>
          <img src="images/image3.jpg">
        </li>
      </ul>
    </div>
  </div>
</body>

</html>

步骤 2 - 添加 CSS 样式

接下来，我们需要为图像灯箱容器和图片列表添加样式。我们可以使用以下的 CSS 代码片段，来创建基本的样式：

.gallery-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: none;
}

.gallery {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.gallery ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.gallery ul li {
  display: inline-block;
  margin: 10px;
}

.gallery ul li img {
  width: 100%;
  max-width: 200px;
  cursor: pointer;
}

.gallery img {
  width: 600px;
  height: auto;
  display: block;
  margin: 0 auto;
}

步骤 3 - 添加 JavaScript 代码

最后，我们需要使用 JavaScript 代码来实现图像灯箱的交互式功能。我们可以使用以下的 JavaScript 代码片段，来实现基本的交互式功能：

var galleryContainer = document.querySelector('.gallery-container');
var gallery = document.querySelector('.gallery');
var images = document.querySelectorAll('.gallery img');
var index = 0;

function openGallery() {
  galleryContainer.style.display = 'block';
  setGalleryImage(index);
}

function setGalleryImage(i) {
  gallery.innerHTML = '';
  gallery.appendChild(images[i].cloneNode());
  index = i;
}

function nextGalleryImage() {
  if (index < images.length - 1) {
    setGalleryImage(index + 1);
  }
}

function prevGalleryImage() {
  if (index > 0) {
    setGalleryImage(index - 1);
  }
}

function closeGallery() {
  galleryContainer.style.display = 'none';
}

for (var i = 0; i < images.length; i++) {
  images[i].addEventListener('click', function() {
    openGallery();
    setGalleryImage(Array.from(images).indexOf(event.target));
  });
}

galleryContainer.addEventListener('click', function(event) {
  if (event.target === galleryContainer) {
    closeGallery();
  }
});

document.addEventListener('keydown', function(event) {
  if (event.key === 'Escape') {
    closeGallery();
  } else if (event.key === 'ArrowLeft') {
    prevGalleryImage();
  } else if (event.key === 'ArrowRight') {
    nextGalleryImage();
  }
});

结论

现在，我们已经完成了使用 HTML、CSS 和 JavaScript 来创建一个基本的图像灯箱画廊的教程。我们的图像灯箱画廊可以显示一组图片，并提供简单的交互式功能，例如点击图片打开图像灯箱、使用箭头键切换图片、点击背景关闭图像灯箱等等。