轮播图点指示器切换图片失效，setInterval及事件绑定问题求助

问题根源梳理 #

1. getElementById用法错误：document.getElementById('#banner') 多了前缀#，该方法直接传入ID字符串即可，不需要CSS选择器符号。
2. 选中状态函数逻辑错误：原selected函数内部循环使用局部变量i，循环结束后i等于点的总数，此时dot[i]指向不存在的元素，导致报错，应该使用全局的当前轮播索引i。
3. 点指示器未绑定点击事件：生成点后没有添加点击监听，自然无法触发图片切换。
4. 定时器逻辑缺失：原定时器仅重复调用showSlide，未自动更新轮播索引i，导致轮播卡在第一张；同时手动切换（箭头/点）时未重置定时器，会出现操作冲突的混乱情况。

修正后的完整代码 #

HTML部分（无需修改）

<div id="banner">
    <img src="./assets/images/slideshow/slide1.jpg" alt="Banner print-it">
    <p>Impressions tous formats <span>en boutique et en ligne</span></p>
    <img class="arrow_left" src="./assets/images/arrow_left.png" alt="image fleche gauche">
    <img class="arrow_right" src="./assets/images/arrow_right.png" alt="image fleche droite">
    <div class="dots">
    </div>
</div>

JavaScript部分

const slides = [
    {
        "image":"slide1.jpg",
        "tagLine":"Impressions tous formats <span>en boutique et en ligne</span>"
    },
    {
        "image":"slide2.jpg",
        "tagLine":"Tirages haute définition grand format <span>pour vos bureaux et events</span>"
    },
    {
        "image":"slide3.jpg",
        "tagLine":"Grand choix de couleurs <span>de CMJN aux pantones</span>"
    },
    {
        "image":"slide4.png",
        "tagLine":"Autocollants <span>avec découpe laser sur mesure</span>"
    }
]
// 修正getElementById参数，移除多余的#
const banner = document.getElementById('banner');
const left = document.querySelector('.arrow_left');
const right = document.querySelector('.arrow_right');
const imageElement = document.querySelector('#banner > img');
const nomElement = document.querySelector('#banner > p');

const numberOfSlide = slides.length;
let currentIndex = 0;
let interval;

// 封装定时器逻辑，支持重置
function startAutoPlay() {
    clearInterval(interval);
    interval = setInterval(() => {
        currentIndex = (currentIndex + 1) % numberOfSlide;
        renderSlide();
    }, 5000);
}

/* 生成点指示器并绑定点击事件 */ 
function createDots() {
    const dotsContainer = document.querySelector('.dots');
    for (let index = 0; index < numberOfSlide; index++) {
        const dot = document.createElement('span');
        dot.classList.add('dot');
        // 给每个点绑定点击事件，直接切换到对应索引
        dot.addEventListener('click', () => {
            currentIndex = index;
            renderSlide();
            startAutoPlay();
        });
        dotsContainer.appendChild(dot);
        // 初始选中第一个点
        if (index === 0) { 
            dot.classList.add('dot_selected');
        }
    }
 }
createDots();

/* 更新点的选中状态 */
function updateDotStatus() {
    const dots = document.getElementsByClassName('dot');
    for (let index = 0; index < dots.length; index++) {
        dots[index].classList.remove('dot_selected');
    }
    dots[currentIndex].classList.add('dot_selected');
 }

/* 渲染当前轮播内容 */
function renderSlide() {
    imageElement.src = `./assets/images/slideshow/${slides[currentIndex].image}`;
    nomElement.innerHTML = slides[currentIndex].tagLine;
    updateDotStatus();
}

/* 左箭头点击事件 */
left.addEventListener("click", function () {
    currentIndex = (currentIndex - 1 + numberOfSlide) % numberOfSlide;
    renderSlide();
    startAutoPlay();
});

/* 右箭头点击事件 */   
right.addEventListener("click", function () {
    currentIndex = (currentIndex + 1) % numberOfSlide;
    renderSlide();
    startAutoPlay();
});

// 启动初始自动轮播
startAutoPlay();

关键修改说明 #

• 修复getElementById的参数错误，确保正确获取DOM元素。
• 给每个点指示器绑定点击事件，点击后直接切换到对应索引的轮播项。
• 使用全局变量currentIndex替代原i，避免局部变量冲突导致的选中状态错误。
• 封装定时器为startAutoPlay函数，每次手动操作后重置定时器，避免自动轮播与手动切换冲突。
• 使用取模运算%简化索引边界判断，代码更简洁健壮。

内容的提问来源于stack exchange，提问作者Miguel Vidal bravo jandia