如何在无依赖JS滑块的.gallery-counter中显示幻灯片计数

要在.gallery-counter中显示当前幻灯片位置/总数量，只需在现有代码基础上添加计数器更新逻辑，具体操作如下：

1. 缓存总幻灯片数量 #

将总幻灯片数量的查询移至全局作用域，避免每次切换时重复查询DOM，提升性能：

let currentIndex = 0;
// 缓存总幻灯片数量
const totalImages = document.querySelectorAll('.gallery-item').length;

2. 编写计数器更新函数 #

创建专门的函数更新计数器内容，注意currentIndex从0开始，当前页码需加1：

function updateCounter() {
  const counterElement = document.querySelector('.gallery-counter');
  // 格式为 "当前页码/总数量"
  counterElement.textContent = `${currentIndex + 1}/${totalImages}`;
}

3. 初始化与触发更新 #

• 页面加载完成后立即调用updateCounter，确保初始状态显示正确计数；
• 在navigate函数末尾调用updateCounter，每次切换幻灯片时同步更新计数。

修改后的完整JavaScript代码 #

let currentIndex = 0;
// 缓存总幻灯片数量
const totalImages = document.querySelectorAll('.gallery-item').length;

document.querySelector('.prev-button').addEventListener('click', () => {
    navigate(-1);
});

document.querySelector('.next-button').addEventListener('click', () => {
    navigate(1);
});

// 更新计数器函数
function updateCounter() {
  const counterElement = document.querySelector('.gallery-counter');
  counterElement.textContent = `${currentIndex + 1}/${totalImages}`;
}

// Navigation
function navigate(direction) {
    const galleryContainer = document.querySelector('.gallery-container');

    currentIndex = (currentIndex + direction + totalImages) % totalImages;
    const offset = -currentIndex * 100;

    galleryContainer.style.transform = `translateX(${offset}%)`;
    // 切换后更新计数器
    updateCounter();
}

// Autoplay
let autoplayInterval = null;

function startAutoplay(interval) {
    stopAutoplay();
    autoplayInterval = setInterval(() => {
        navigate(1);
    }, interval);
}

function stopAutoplay() {
    clearInterval(autoplayInterval);
}

// 初始化计数器
updateCounter();
startAutoplay(3000);

// Stop autoplay when user interacts
document.querySelectorAll('.nav-button').forEach(button => {
    button.addEventListener('click', stopAutoplay);
});

HTML部分无需修改 #

你的现有HTML已经包含.gallery-counter元素，无需额外调整：

<section id="gallery">
    <div class="gallery-container">
        <figure class="gallery-item">
            <img src="https://picsum.photos/seed/picsum/200/300" />
        </figure>
        <figure class="gallery-item">
            <img src="https://picsum.photos/200/300/?blur" />
        </figure>
        <figure class="gallery-item">
            <img src="https://picsum.photos/id/870/200/300?grayscale&blur=2" />
        </figure>
    </div>
    <div class="gallery-counter"></div>
    <nav class="gallery-navigation">
        <button class="nav-button prev-button"><span>&#60;</span></button>
        <button class="nav-button next-button"><span>&#62;</span></button>
    </nav>
</section>

修改完成后，滑块初始会显示1/3（对应示例中的3张幻灯片），点击前后按钮或自动播放时，计数器会同步更新为当前幻灯片的位置。

内容的提问来源于stack exchange，提问作者Mathieu Préaud