基于HTML/CSS/原生JS的轮播报错无法切换，求修复方案

你的控制台错误Cannot read property 'style' of null本质是传入moveToSlide函数的targetSlide为null，导致无法读取它的style属性。我梳理了代码里的几个拼写错误和逻辑问题，逐一修复后就能正常运行：

问题点及修复方案 #

1. 拼写错误导致变量未定义 #

• hideShowArrows函数里的silides.length → 修正为slides.length（少写了字母d）
• 上一页按钮点击事件里的previousElementsibling → 修正为previousElementSibling（Element的首字母E需要大写）
• 下一页按钮点击事件里的nexDot → 修正为nextDot（拼写错误）

2. 变量传递/未定义问题 #

• 下一页按钮点击事件中，调用updateDots时传错参数，nexDot改为nextDot
• 上一页/下一页按钮点击事件里，调用hideShowArrows时未定义目标索引，需要先通过findIndex计算出目标slide的索引值
• dots导航点击事件里，updateDots(currentDot, updateDots)传错参数，应该传入targetDot而非函数本身

3. DOM元素选择错误 #

dots导航的点击事件里，e.target.closest('button')不符合你的HTML结构——你的dots是<div class="carousel__indicator">而非button，所以要改成e.target.closest('.carousel__indicator')，否则点击dots会直接终止逻辑。

修复后的完整JavaScript代码 #

const track = document.querySelector('.carousel__track');
const slides = Array.from(track.children);
const nextButton = document.querySelector('.carousel__button--right');
const prevButton = document.querySelector('.carousel__button--left');
const dotsNav = document.querySelector('.carousel__nav');
const dots = Array.from(dotsNav.children);
const slideWidth = slides[0].getBoundingClientRect().width;

const setSlidePosition = (slide, index) => {
    slide.style.left = slideWidth * index + 'px';
};
slides.forEach(setSlidePosition);

const moveToSlide = (track, currentSlide, targetSlide) => {
    track.style.transform = 'translateX(-' + targetSlide.style.left + ')';
    currentSlide.classList.remove('current-slide');
    targetSlide.classList.add('current-slide');
}

const updateDots = (currentDot, targetDot) => {
    currentDot.classList.remove('current-slide');
    targetDot.classList.add('current-slide');
}

const hideShowArrows = (slides, prevButton, nextButton, targetIndex) => {
    if (targetIndex === 0){
        prevButton.classList.add('is-hidden');
        nextButton.classList.remove('is-hidden');
    } else if (targetIndex === slides.length -1) {
        prevButton.classList.remove('is-hidden');
        nextButton.classList.add('is-hidden');
    } else {
        prevButton.classList.remove('is-hidden');
        nextButton.classList.remove('is-hidden');
    }
}

prevButton.addEventListener('click', e => {
    const currentSlide = track.querySelector('.current-slide');
    const prevSlide = currentSlide.previousElementSibling;
    const currentDot = dotsNav.querySelector('.current-slide');
    const prevDot = currentDot.previousElementSibling;
    const targetIndex = slides.findIndex(slide => slide === prevSlide);
    moveToSlide(track, currentSlide, prevSlide);
    updateDots(currentDot, prevDot);
    hideShowArrows(slides, prevButton, nextButton, targetIndex);
});

nextButton.addEventListener('click', e => {
    const currentSlide = track.querySelector('.current-slide');
    const nextSlide = currentSlide.nextElementSibling;
    const currentDot = dotsNav.querySelector('.current-slide');
    const nextDot = currentDot.nextElementSibling;
    const targetIndex = slides.findIndex(slide => slide === nextSlide);
    moveToSlide(track, currentSlide, nextSlide);
    updateDots(currentDot, nextDot);
    hideShowArrows(slides, prevButton, nextButton, targetIndex);
});

dotsNav.addEventListener('click', e => {
    const targetDot = e.target.closest('.carousel__indicator');
    if(!targetDot) return;
    const currentSlide = track.querySelector('.current-slide');
    const currentDot = dotsNav.querySelector('.current-slide')
    const targetIndex = dots.findIndex(dot => dot === targetDot);
    const targetSlide = slides[targetIndex];
    moveToSlide (track, currentSlide, targetSlide);
    updateDots(currentDot, targetDot);
    hideShowArrows(slides, prevButton, nextButton, targetIndex);
})

额外优化建议 #

• dots导航里的箭头显示/隐藏逻辑可以直接复用hideShowArrows函数，减少代码冗余
• 可以监听窗口resize事件，重新计算slideWidth并重置slide位置，保证轮播在窗口尺寸变化时依然正常

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