如何用JavaScript实现图片全屏展示及返回图片画廊功能？

AI 小北

2026-5-8

纯JavaScript实现图片画廊全屏预览功能

绝对可以用纯JavaScript搞定这个需求！咱们先梳理下你现有代码里的几个关键问题，再一步步改成你想要的全屏效果：

现有代码的问题分析

全屏容器样式缺失：你的.container没有设置全屏覆盖的定位和尺寸，默认只是普通块级元素，自然没法占满整个屏幕
关闭按钮样式嵌套错误：CSS里的.closebtn被嵌套在.thumbnail下，导致它的定位是相对于画廊里的小图容器，而不是全屏容器
JS逻辑不完整：只设置了大图的src，但没控制全屏容器的显示状态，也没处理关闭后的隐藏逻辑

修改后的完整代码

index.html

调整全屏容器的默认状态（默认隐藏），确保关闭按钮的层级正确，同时阻止<a>标签的默认跳转行为：

<div class="image-gallery-items">
  <div class="image-gallery-item">
    <a href="#" class="thumbnail" onclick="event.preventDefault();">
      <img src="images/img.png" onclick="imgDisplay(this);">
    </a>
  </div>
  <div class="image-gallery-item">
    <a href="#" class="thumbnail" onclick="event.preventDefault();">
      <img src="images/img1.png" onclick="imgDisplay(this);">
    </a>
  </div>
</div>

<!-- 全屏预览容器，默认隐藏 -->
<div class="container" style="display: none;">
  <span onclick="closeFullImg()" class="closebtn">&times;</span>
  <img id="fullImg" alt="全屏预览图">
</div>

index.css

完善全屏容器的样式，修复关闭按钮定位，优化画廊布局的交互体验：

/* 画廊基础布局 */
.image-gallery-items {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* 图片间间距，比padding更整洁 */
  padding: 10px;
  overflow: auto;
}

.image-gallery-item {
  flex: 0 0 auto;
}

.thumbnail img {
  width: 190px;
  height: auto;
  cursor: zoom-in; /* 悬停显示放大图标，提示可点击 */
}

/* 全屏预览核心样式 */
.container {
  position: fixed; /* 固定定位，覆盖整个视口 */
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.9); /* 半黑背景突出图片 */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999; /* 确保在所有元素上方 */
}

/* 关闭按钮样式 */
.closebtn {
  position: absolute;
  top: 20px;
  right: 30px;
  color: white;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
  transition: color 0.2s; /*  hover过渡效果 */
}

.closebtn:hover {
  color: #ccc;
}

/* 全屏图片自适应 */
#fullImg {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain; /* 保持图片比例，避免拉伸变形 */
}

index.js

完善JS逻辑，控制全屏容器的显示与隐藏，还额外添加了点击背景关闭的功能：

// 打开全屏预览
function imgDisplay(img) {
  const fullImg = document.getElementById('fullImg');
  const container = document.querySelector('.container');
  
  fullImg.src = img.src;
  container.style.display = 'flex'; // 显示全屏容器
}

// 关闭全屏预览
function closeFullImg() {
  const container = document.querySelector('.container');
  container.style.display = 'none'; // 隐藏全屏容器
}

// 可选：点击全屏背景区域也关闭预览
document.querySelector('.container').addEventListener('click', function(e) {
  if (e.target === this) { // 确保点击的是背景而非图片/按钮
    closeFullImg();
  }
});

功能说明

点击画廊里的任意图片，会弹出全屏半黑背景容器，居中展示大图
点击右上角的X按钮，或者直接点击背景区域，都能关闭预览返回画廊
所有逻辑都是纯JavaScript实现，完全不依赖任何第三方库

内容的提问来源于stack exchange，提问作者Greeshma Nimmala