为画廊网站创建带有导航的多个模式

解决方案 1：带有箭头的基本 HTML、CSS 和 JavaScript 模态

该解决方案演示了一种使用 HTML、CSS 和普通 JavaScript 进行导航模式的纯前端方法。

// HTML structure for each modal
<div class="modal" id="modal1">
  <span class="close" onclick="closeModal()">&times;</span>
  <img class="modal-content" id="img01">
  <div class="caption"></div>
  <div class="nav left" onclick="prevImage()">❮</div>
  <div class="nav right" onclick="nextImage()">❯</div>
</div>
// JavaScript to handle modal behavior
let currentImage = 0;
const images = document.querySelectorAll('.galleryimg');
const modal = document.getElementById('modal1');
const modalImg = document.getElementById('img01');
images.forEach((img, index) => {
  img.onclick = () => {
    openModal(index);
  };
});
function openModal(index) {
  currentImage = index;
  modal.style.display = "block";
  modalImg.src = images[index].src;
}
function closeModal() {
  modal.style.display = "none";
}
function nextImage() {
  currentImage = (currentImage + 1) % images.length;
  modalImg.src = images[currentImage].src;
}
function prevImage() {
  currentImage = (currentImage - 1 + images.length) % images.length;
  modalImg.src = images[currentImage].src;
}
// CSS for modal styling
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
}
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
}
.nav {
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

解决方案 2：具有事件委托的模块化 JavaScript 方法

这种方法使用模块化 JavaScript 函数来提高可扩展性和可维护性。

// Modular JavaScript setup for gallery modal
class GalleryModal {
  constructor(images) {
    this.images = images;
    this.currentImage = 0;
    this.modal = document.querySelector('.modal');
    this.modalImg = this.modal.querySelector('.modal-content');
    this.attachEventListeners();
  }
  attachEventListeners() {
    this.images.forEach((img, index) => {
      img.addEventListener('click', () => this.open(index));
    });
    this.modal.querySelector('.left').addEventListener('click', () => this.prev());
    this.modal.querySelector('.right').addEventListener('click', () => this.next());
  }
  open(index) {
    this.currentImage = index;
    this.modal.style.display = 'block';
    this.modalImg.src = this.images[index].src;
  }
  next() {
    this.currentImage = (this.currentImage + 1) % this.images.length;
    this.modalImg.src = this.images[this.currentImage].src;
  }
  prev() {
    this.currentImage = (this.currentImage - 1 + this.images.length) % this.images.length;
    this.modalImg.src = this.images[this.currentImage].src;
  }
}
// Initialize the modal functionality
document.addEventListener('DOMContentLoaded', () => {
  const images = document.querySelectorAll('.galleryimg');
  new GalleryModal(images);
});
// Additional CSS Styling
.modal {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
}

关于使用 JavaScript 实现模态框的常见问题

1. 如何使用 JavaScript 触发模式？
2. 您可以使用 addEventListener('click') 单击图像时打开模式。
3. 如何使用键盘关闭模式？
4. 听听 keydown 事件并检查是否 key === 'Escape' 关闭模式。
5. 实现下一张和上一张图像导航的最简单方法是什么？
6. 使用 modulus (%) 循环浏览图像而不到达列表末尾。
7. 如何确保模式在移动设备上正常工作？
8. 使用 media queries CSS 并在不同的屏幕尺寸上测试设计。
9. 什么是延迟加载，如何实现它？
10. 添加 loading="lazy" 给你的 img 标签推迟加载图像，直到它们出现在视口中。

总结最后的想法

实施功能性 情态动词 在画廊中对于改善用户交互至关重要。添加基于箭头的导航和键盘支持等功能可确保图库用户友好并可在多种设备上访问。这些元素允许用户有效地浏览图像。

为了保持画廊的性能，应该使用延迟加载等优化技术。结构良好的组合 JavaScript 和 CSS 可实现平稳过渡和引人入胜的体验。遵循最佳实践可确保图库响应迅速、可访问且易于在未来的更新中进行扩展。