js 缩略图切换大图全屏

<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>

.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%);
}

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';
});