js 缩略图切换大图全屏

在JavaScript中实现缩略图切换到大图并全屏显示的功能，通常涉及DOM操作、事件处理以及可能的CSS样式调整。以下是该功能的基础概念、优势、类型、应用场景，以及实现时可能遇到的问题和解决方案。

基础概念

DOM操作：JavaScript可以通过DOM API来获取和修改HTML元素的内容和样式。
事件处理：通过为HTML元素添加事件监听器，可以在用户交互时执行特定的JavaScript代码。
CSS样式：使用CSS来控制元素的显示方式，包括全屏显示。

优势

用户体验：提供直观的图片查看体验，增强用户互动。
灵活性：可以轻松集成到任何网页或应用中。
可定制性：可以根据需要自定义切换效果和样式。

类型

点击切换：用户点击缩略图后，大图全屏显示。
悬停切换：用户将鼠标悬停在缩略图上时，大图全屏显示（较少见，可能影响用户体验）。

应用场景

图片画廊：在图片画廊或产品展示页中，用户可以点击缩略图查看大图。
社交媒体：在社交媒体平台上，用户可以点击缩略图查看完整的图片内容。

实现步骤及可能遇到的问题

HTML结构：创建缩略图和大图的HTML元素。

<div class="thumbnail-container">
  <img src="thumbnail1.jpg" alt="Thumbnail 1" class="thumbnail">
  <img src="thumbnail2.jpg" alt="Thumbnail 2" class="thumbnail">
  <!-- 更多缩略图 -->
</div>
<div class="full-image-container" id="fullImageContainer">
  <img src="" alt="Full Image" id="fullImage">
</div>

CSS样式：设置缩略图和大图的样式，包括全屏显示的样式。

.full-image-container {
  display: none; /* 默认隐藏 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8); /* 背景半透明 */
  z-index: 1000; /* 确保在最上层 */
}

.full-image-container img {
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

JavaScript代码：添加事件监听器，处理缩略图点击事件，切换大图并全屏显示。

document.querySelectorAll('.thumbnail').forEach(thumbnail => {
  thumbnail.addEventListener('click', function() {
    const fullImage = document.getElementById('fullImage');
    const fullImageContainer = document.getElementById('fullImageContainer');
    fullImage.src = this.src.replace('thumbnail', 'fullsize'); // 假设大图文件名为thumbnailX.jpg对应的全图为fullsizeX.jpg
    fullImageContainer.style.display = 'block';
  });
});

// 添加一个关闭全屏图片的功能
document.getElementById('fullImageContainer').addEventListener('click', function() {
  this.style.display = 'none';
});