如何修复轮播滑块滑动到首尾后跳转空白、无法循环的问题

云原生阿岚

2026-10-3

故障根因

数组索引边界判断逻辑错误：你当前有2个slider-wrapper滑块块，slides.length返回值为2，数组有效索引范围是0~1，原判断条件偏移导致索引越界，访问不存在的DOM元素就会出现空白区域。
原代码if(n > slides.length)仅当n≥3时才会重置为0，实际在最后一张（索引1）点击下一张时n会变成2，不会触发重置，直接访问slides[2]为空；从第一张（索引0）点击上一张时n变为-1，原代码设置count为2，同样越界。

修复代码

只需要修改showSlides函数的边界判断逻辑即可，完整修复后的JS代码如下：

'use strict';
window.addEventListener('DOMContentLoaded', () => {
    // slider
    const slides = document.querySelectorAll('.slider-wrapper');
    const prev = document.querySelector('.slider-prev');
    const next = document.querySelector('.slider-next');

    let count = 0;
    showSlides(0);

    function showSlides(n) {
        // 修正边界判断逻辑
        if(n >= slides.length){
            count = 0;
        } else if(n < 0) {
            count = slides.length - 1;
        } else {
            count = n;
        }

        slides.forEach(item => {
            item.classList.add('hide');
        });
        slides[count].classList.remove('hide');
    }

    function plusSlides(n) {
        showSlides(count += n);
    }

    prev.addEventListener('click', () => {
        plusSlides(-1);
    });

    next.addEventListener('click', () => {
        plusSlides(1);
    });
});