怎么使用JavaScript实现轮播图效果？

<div class="carousel-container">
    <div class="carousel-slides">
        <img src="https://via.placeholder.com/800x400/FF5733/FFFFFF?text=Slide+1" alt="Slide 1">
        <img src="https://via.placeholder.com/800x400/33FF57/FFFFFF?text=Slide+2" alt="Slide 2">
        <img src="https://via.placeholder.com/800x400/3357FF/FFFFFF?text=Slide+3" alt="Slide 3">
    </div>
    <button class="carousel-button prev">❮</button>
    <button class="carousel-button next">❯</button>
    <div class="carousel-dots">
        <span class="dot active"></span>
        <span class="dot"></span>
        <span class="dot"></span>
    </div>
</div>

.carousel-container {
    width: 800px; /* 示例宽度 */
    height: 400px; /* 示例高度 */
    margin: 20px auto;
    position: relative;
    overflow: hidden; /* 隐藏超出容器的图片 */
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.carousel-slides {
    display: flex; /* 让图片水平排列 */
    width: 300%; /* 假设有3张图片，每张100% */
    height: 100%;
    transition: transform 0.5s ease-in-out; /* 动画过渡效果 */
}

.carousel-slides img {
    width: 100%; /* 每张图片占据容器的100%宽度 */
    height: 100%;
    object-fit: cover; /* 确保图片覆盖整个区域 */
    flex-shrink: 0; /* 防止图片缩小 */
}

.carousel-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 24px;
    z-index: 10;
    border-radius: 4px;
    opacity: 0.8;
    transition: opacity 0.3s;
}

.carousel-button:hover {
    opacity: 1;
}

.carousel-button.prev {
    left: 10px;
}

.carousel-button.next {
    right: 10px;
}

.carousel-dots {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
}

.dot {
    width: 10px;
    height: 10px;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s;
}

.dot.active {
    background-color: #3357FF; /* 活跃点的颜色 */
}

document.addEventListener('DOMContentLoaded', () => {
    const slidesContainer = document.querySelector('.carousel-slides');
    const slides = document.querySelectorAll('.carousel-slides img');
    const prevButton = document.querySelector('.carousel-button.prev');
    const nextButton = document.querySelector('.carousel-button.next');
    const dotsContainer = document.querySelector('.carousel-dots');
    const dots = document.querySelectorAll('.carousel-dots .dot');
    const carouselContainer = document.querySelector('.carousel-container');

    let currentIndex = 0;
    const totalSlides = slides.length;
    let autoPlayInterval;
    const autoPlayTime = 3000; // 3秒切换一次

    // 更新轮播图显示
    function showSlide(index) {
        if (index >= totalSlides) {
            currentIndex = 0;
        } else if (index < 0) {
            currentIndex = totalSlides - 1;
        } else {
            currentIndex = index;
        }

        const offset = -currentIndex * 100; // 计算偏移量
        slidesContainer.style.transform = `translateX(${offset}%)`;

        // 更新指示点状态
        dots.forEach((dot, i) => {
            dot.classList.remove('active');
            if (i === currentIndex) {
                dot.classList.add('active');
            }
        });
    }

    // 切换到下一张
    function nextSlide() {
        showSlide(currentIndex + 1);
    }

    // 切换到上一张
    function prevSlide() {
        showSlide(currentIndex - 1);
    }

    // 启动自动播放
    function startAutoPlay() {
        stopAutoPlay(); // 确保只有一个定时器在运行
        autoPlayInterval = setInterval(nextSlide, autoPlayTime);
    }

    // 停止自动播放
    function stopAutoPlay() {
        clearInterval(autoPlayInterval);
    }

    // 事件监听
    prevButton.addEventListener('click', () => {
        stopAutoPlay(); // 用户点击后暂停自动播放
        prevSlide();
        startAutoPlay(); // 几秒后重新启动
    });

    nextButton.addEventListener('click', () => {
        stopAutoPlay();
        nextSlide();
        startAutoPlay();
    });

    dots.forEach((dot, index) => {
        dot.addEventListener('click', () => {
            stopAutoPlay();
            showSlide(index);
            startAutoPlay();
        });
    });

    // 鼠标悬停时暂停自动播放，移开时恢复
    carouselContainer.addEventListener('mouseenter', stopAutoPlay);
    carouselContainer.addEventListener('mouseleave', startAutoPlay);

    // 初始化显示第一张幻灯片并启动自动播放
    showSlide(0);
    startAutoPlay();
});