网站轮播画廊问题：实现.active图片居中及循环切换

问题背景 #

我是编程新手，正在为雇主开发网站的图片画廊模块。当前功能为点击图片或按钮时，目标图片添加.active类放大显示，但需实现两个核心需求：

1. 带有.active类的图片始终在GalleryContainer容器中居中显示
2. 画廊支持循环切换：点击最后一张的「Next」按钮跳转到第一张，点击第一张的「Previous」按钮跳转到最后一张

尝试用ChatGPT解决未成功，自身JavaScript经验不足无法修复，现有代码如下：

现有代码 #

HTML

<section class="Gallery">
    <button class="prevButton">Previous</button>

    <div class="GalleryContainer">
        <div class="Image one active">
            <p class="ImageText">ENDLESS WAVE</p>
        </div>
        <div class="Image two">
            <p class="ImageText">INTERESTING TOM</p>
        </div>
        <div class="Image three">
            <p class="ImageText">ZOMBIE</p>
        </div>
       <!-- rest of the images (20 in total)-->
    </div>
    
     <button class="nextButton">Next</button>
</section>

JavaScript

// Get the gallery container and images
const galleryContainer = document.querySelector('.GalleryContainer');
const images = Array.from(galleryContainer.querySelectorAll('.Image'));

// Get the buttons for navigation
const prevButton = document.querySelector('.prevButton');
const nextButton = document.querySelector('.nextButton');

// Function to handle image click
function handleImageClick(event) {
  const clickedImage = event.target;

  // Check if the clicked image is already active
  const isActive = clickedImage.classList.contains('active');

  // Remove "active" class from all images
  images.forEach(image => {
    image.classList.remove('active');
  });

  // Add "active" class to the clicked image if it was not active, or remove it if it was active
  if (!isActive) {
    clickedImage.classList.add('active');
  }
}

// Function to handle previous button click
function handlePrevButtonClick() {
  const activeImage = galleryContainer.querySelector('.active');
  const prevImage = activeImage.previousElementSibling || images[images.length - 1];

  activeImage.classList.remove('active');
  prevImage.classList.add('active');
}

// Function to handle next button click
function handleNextButtonClick() {
  const activeImage = galleryContainer.querySelector('.active');
  const nextImage = activeImage.nextElementSibling || images[0];

  activeImage.classList.remove('active');
  nextImage.classList.add('active');
}

// Add click event listener to each image
images.forEach(image => {
  image.addEventListener('click', handleImageClick);
});

// Add click event listeners to the navigation buttons
prevButton.addEventListener('click', handlePrevButtonClick);
nextButton.addEventListener('click', handleNextButtonClick);

CSS

.Gallery{
    width: 100%;
    height: auto;
    background: url(/home/adam/Plocha/Stars-Projects/BocaBar/Adamneces.github.io/resources/Photo/ALL/FotoJet2.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: repeat;
    background-attachment: fixed;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.GalleryContainer{
    width: 100%;
    max-width: 1920px;
    height: 550px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: no-wrap;
    overflow: auto;
    align-items: flex-end;
    margin: 0 20px;
    padding: 50px 0;
}
.Image{
    max-width: 70px;
    min-width: 50px;
    height: 400px;
    background-position: center;
    background-size: auto 100%;
    background-repeat: no-repeat;
    object-fit: cover;
    border-radius: 40px;
    overflow: hidden;
    margin: 10px;
    transition: all linear 0.4s;
    cursor: pointer;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    font-size: 1px;
    border: 3px solid #063137;
}
.active{
    min-width: 380px;
    height: 430px;
    background-size:cover;
    background-position:bottom;
    opacity: 1;
    border-radius: 20%;
    margin: 0 10px;
    overflow: hidden;
    font-size: 30px;
    color: white;
    text-shadow: 2px 2px black;
    letter-spacing: 1px;
}
.ImageText{
    padding: 3px 120px 0px 20px;
    border-radius: 0px 10px 10px 0px;
    background-color: #B81414;
}
.prevButton, .nextButton{}

.one{
    background-image: url(/home/adam/Plocha/Stars-Projects/BocaBar/Adamneces.github.io/resources/Photo/ALL/DSC_0170.jpg);
}
.two{
    background-image: url(/home/adam/Plocha/Stars-Projects/BocaBar/Adamneces.github.io/resources/Photo/ALL/DSC_0177.jpg);
}
.three, .four, etc......

修复方案 #

1. 实现激活图片居中（CSS+JS结合） #

当前GalleryContainer的滚动逻辑无法自动定位激活图片到中心，需添加平滑滚动和定位逻辑：

• 给GalleryContainer添加scroll-behavior: smooth实现平滑滚动
• 新增通用函数计算并滚动到激活图片的中心位置

修改后的CSS片段：

.GalleryContainer{
    /* 保留原有属性 */
    flex-wrap: nowrap; /* 修正原拼写错误 no-wrap → nowrap */
    scroll-behavior: smooth; /* 添加平滑滚动 */
}

新增的JavaScript函数：

function scrollToActiveImage() {
  const activeImage = galleryContainer.querySelector('.active');
  // 计算滚动位置：激活图片左偏移 + 图片宽度/2 - 容器宽度/2
  const scrollPosition = activeImage.offsetLeft + activeImage.offsetWidth / 2 - galleryContainer.offsetWidth / 2;
  galleryContainer.scrollTo({
    left: scrollPosition,
    behavior: 'smooth'
  });
}

2. 修复循环切换逻辑 #

原代码依赖previousElementSibling/nextElementSibling的方式存在兼容性问题，改用数组索引的方式更可靠：

修改后的导航按钮点击函数：

function handlePrevButtonClick() {
  const activeIndex = images.findIndex(img => img.classList.contains('active'));
  // 循环逻辑：第一张的上一张是最后一张
  const prevIndex = activeIndex === 0 ? images.length - 1 : activeIndex - 1;
  
  images.forEach(img => img.classList.remove('active'));
  images[prevIndex].classList.add('active');
  scrollToActiveImage();
}

function handleNextButtonClick() {
  const activeIndex = images.findIndex(img => img.classList.contains('active'));
  // 循环逻辑：最后一张的下一张是第一张
  const nextIndex = activeIndex === images.length - 1 ? 0 : activeIndex + 1;
  
  images.forEach(img => img.classList.remove('active'));
  images[nextIndex].classList.add('active');
  scrollToActiveImage();
}

3. 修复图片点击目标错误 #

原代码中点击.ImageText标签时，event.target会指向<p>标签而非图片容器，导致类操作失效，需向上查找父级.Image元素：

修改后的图片点击函数：

function handleImageClick(event) {
  // 向上查找最近的.Image容器
  const clickedImage = event.target.closest('.Image');
  if (!clickedImage) return;
  
  const isActive = clickedImage.classList.contains('active');
  
  images.forEach(image => {
    image.classList.remove('active');
  });
  
  if (!isActive) {
    clickedImage.classList.add('active');
    scrollToActiveImage();
  }
}

4. 初始化居中 #

在脚本末尾添加初始化调用，确保页面加载时激活图片已经居中：

// 页面加载完成后让激活图片居中
scrollToActiveImage();

内容的提问来源于stack exchange，提问作者Adam Nečesaný