轮播图点亮小圆点代码

### 实现轮播图自动切换并点亮对应小圆点

为了实现轮播图中的小圆点高亮效果，在HTML中定义好基本结构，包括图片容器和指示器（即小圆点）。CSS用于设置样式以及隐藏除当前展示外的其他图片。JavaScript负责控制逻辑，比如初始化、处理点击事件触发手动切换，设定时间间隔以支持自动化播放，并同步更新活动状态下的小圆点。

#### HTML 结构

<div class="carousel">
    <ul>
        <!-- 图片列表 -->
        <li><img src="image1.jpg" alt=""></li>
        <li><img src="image2.jpg" alt=""></li>
        <li><img src="image3.jpg" alt=""></li>
    </ul>
    
    <!-- 小圆点导航 -->
    <ol class="indicators">
        <li data-index="0"></li>
        <li data-index="1"></li>
        <li data-index="2"></li>
    </ol>
</div>

#### CSS 样式

.carousel ul {
    list-style-type: none;
}

.carousel li img {
    display: none; /* 默认隐藏 */
}
.carousel .active img { 
    display: block !important; /* 显示激活项 */
}

.indicators li {
    width: 15px;
    height: 15px;
    background-color: gray;
    border-radius: 50%;
    cursor: pointer;
    float: left;
    margin-right: 8px;
}

.indicators .active {
    background-color: red; /* 当前选中时改变颜色 */
}

#### JavaScript 控制脚本

const carouselItems = document.querySelectorAll('.carousel ul li');
let currentIndex = 0;

// 初始化第一个元素为可见
function initCarousel() {
    const indicators = document.querySelector(".indicators");
    Array.from(indicators.children).forEach((dot, index) => {
        dot.addEventListener('click', () => showSlide(index));
    });
    showSlide(currentIndex);
}

// 切换到指定索引处的幻灯片
function showSlide(index) {
    if (index >= carouselItems.length || index < 0){
        return;
    }
    // 移除所有 'active' 类名
    [...document.getElementsByClassName('active')].forEach(item => item.classList.remove('active'));
    
    // 添加新的 'active' 类名为当前幻灯片及其对应的指示符
    carouselItems[index].classList.add('active');
    document.querySelector(`.indicators li[data-index="${index}"]`).classList.add('active');

    currentIndex = index;
}

initCarousel();

setInterval(() => {
    let nextIndex = (currentIndex + 1) % carouselItems.length;
    showSlide(nextIndex);
}, 3000); // 自动每三秒切换一次

此方法不仅实现了基于计时器的自动滚动功能[^1]，同时也允许用户通过点击底部的小圆点来选择特定的图像[^2]。每当发生切换动作时，都会相应地更改`active`类的位置，从而达到视觉上的突出显示效果[^3]。