当前位置：首页 > 文章列表 > 文章 > 前端 > 居中高亮图片画廊制作教程

居中高亮图片画廊制作教程

2026-01-30 23:15:41 0浏览收藏

✅ 一、关键 JavaScript 改进：居中 + 循环

首先，移除原 handleImageClick 中的开关式逻辑（点击已激活图会取消高亮），改为每次点击都推进到下一张，并立即居中显示：

const galleryContainer = document.querySelector('.GalleryContainer');
const images = Array.from(galleryContainer.querySelectorAll('.Image'));

// 【核心】将当前 active 图居中（需设置父容器 position: relative）
function centerActiveImage() {
  const activeImage = galleryContainer.querySelector('.active');
  if (!activeImage) return;

  // 确保 GalleryContainer 有相对定位（见下方 CSS 补充）
  const rect = galleryContainer.getBoundingClientRect();
  const imgRect = activeImage.getBoundingClientRect();
  const offsetX = (rect.width - imgRect.width) / 2;
  const offsetY = (rect.height - imgRect.height) / 2;

  // 使用 transform 替代 left/top（更高效且不破坏 flex 布局）
  activeImage.style.transform = `translate(${offsetX}px, ${offsetY}px)`;
}

// 【核心】轮播逻辑：点击任一图 → 激活下一张（循环）
function goToNext() {
  const activeImage = galleryContainer.querySelector('.active');
  const currentIndex = images.indexOf(activeImage);
  const nextIndex = (currentIndex + 1) % images.length;

  // 移除所有 active，激活下一张
  images.forEach(img => img.classList.remove('active'));
  images[nextIndex].classList.add('active');
}

// 绑定事件：所有图片点击均触发轮播
images.forEach(image => image.addEventListener('click', goToNext));

// 页面加载完成后居中当前 active 图，并监听窗口大小变化以适配响应式
window.addEventListener('load', centerActiveImage);
window.addEventListener('resize', centerActiveImage);

⚠️ 注意：transform: translate() 是推荐方案——它不干扰 Flex 布局流，避免因 position: absolute 导致布局塌陷，也比直接修改 left/top 更性能友好。

✅ 二、必要 CSS 补充：确保居中生效

在原有样式基础上，补充以下关键规则：

.GalleryContainer {
  position: relative; /* 为 translate 提供参考坐标系 */
  overflow: hidden;   /* 隐藏平移过程中的溢出 */
}

.Image {
  /* 移除可能冲突的 margin/auto 布局 */
  margin: 0;
  flex: 0 0 auto; /* 禁止 flex 压缩/拉伸，保证尺寸可控 */
  transition: transform 0.4s ease, opacity 0.3s ease;
}

.Image.active {
  z-index: 10; /* 确保高亮图始终在最上层 */
  opacity: 1;
}

/* 可选：添加过渡动画增强体验 */
.GalleryContainer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.1);
  pointer-events: none;
  z-index: 1;
}

✅ 三、导航按钮增强（可选但推荐）

你已有 .prevButton 和 .nextButton，只需复用 goToNext 并扩展反向逻辑：

// 补充 prev 操作（倒序轮播）
function goToPrev() {
  const activeImage = galleryContainer.querySelector('.active');
  const currentIndex = images.indexOf(activeImage);
  const prevIndex = (currentIndex - 1 + images.length) % images.length;
  images.forEach(img => img.classList.remove('active'));
  images[prevIndex].classList.add('active');
}

prevButton.addEventListener('click', goToPrev);
nextButton.addEventListener('click', goToNext);

// 同时保持 resize 时重新居中
nextButton.addEventListener('click', centerActiveImage);
prevButton.addEventListener('click', centerActiveImage);

✅ 四、最终效果与注意事项

✅ 居中精准：无论窗口缩放或图片尺寸变化，.active 图片始终水平垂直居中于 .GalleryContainer；
✅ 无缝轮播：20 张图点击/按钮操作均自动循环（第 20 张 → 第 1 张）；
✅ 零依赖：无需 jQuery 或外部库，原生 JS 轻量可靠；
⚠️ 路径注意：本地 file:// 协议下部分浏览器会阻止 background-image 加载，请部署到本地服务器（如 VS Code Live Server）测试；
? 进阶提示：如需自动轮播，可加 setInterval(goToNext, 4000)，并配合鼠标悬停暂停（galleryContainer.addEventListener('mouseenter', () => clearInterval(timer))）。

这套方案兼顾语义化、可维护性与初学者友好度——你不需要理解复杂算法，只需理解“每次点击 = 激活下一张 + 居中显示”这一简单范式，即可掌控整个画廊行为。

以上就是《居中高亮图片画廊制作教程》的详细内容，更多关于的资料请关注golang学习网公众号！