如何用HTML制作一个简单的轮播图？ 基础轮播实现方案

<div class="carousel-container">
    <div class="carousel-slide">
        <img src="image1.jpg" alt="图片描述 1">
        <img src="image2.jpg" alt="图片描述 2">
        <img src="image3.jpg" alt="图片描述 3">
    </div>
    <button class="prev-btn">❮</button>
    <button class="next-btn">❯</button>
    <div class="carousel-dots">
        <span class="dot active"></span>
        <span class="dot"></span>
        <span class="dot"></span>
    </div>
</div>

.carousel-container {
    position: relative;
    max-width: 800px; /* 限制一下容器宽度 */
    margin: 0 auto;
    overflow: hidden; /* 隐藏超出容器的部分 */
}

.carousel-slide img {
    width: 100%;
    display: none; /* 默认所有图片都隐藏 */
}

.carousel-slide img.active {
    display: block; /* 当前激活的图片显示 */
}

.prev-btn, .next-btn {
    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: 20px;
    z-index: 10;
}

.prev-btn {
    left: 10px;
}

.next-btn {
    right: 10px;
}

.carousel-dots {
    text-align: center;
    padding: 10px 0;
}

.dot {
    display: inline-block;
    height: 10px;
    width: 10px;
    margin: 0 5px;
    background-color: #bbb;
    border-radius: 50%;
    cursor: pointer;
}

.dot.active {
    background-color: #717171;
}

document.addEventListener('DOMContentLoaded', () => {
    const slides = document.querySelectorAll('.carousel-slide img');
    const dots = document.querySelectorAll('.dot');
    const prevBtn = document.querySelector('.prev-btn');
    const nextBtn = document.querySelector('.next-btn');

    let currentSlide = 0;

    function showSlide(index) {
        // 隐藏所有图片和取消所有指示点的激活状态
        slides.forEach(slide => slide.classList.remove('active'));
        dots.forEach(dot => dot.classList.remove('active'));

        // 显示当前图片和激活当前指示点
        slides[index].classList.add('active');
        dots[index].classList.add('active');
    }

    function nextSlide() {
        currentSlide = (currentSlide + 1) % slides.length;
        showSlide(currentSlide);
    }

    function prevSlide() {
        currentSlide = (currentSlide - 1 + slides.length) % slides.length;
        showSlide(currentSlide);
    }

    // 初始化显示第一张图片
    showSlide(currentSlide);

    // 添加事件监听器
    nextBtn.addEventListener('click', nextSlide);
    prevBtn.addEventListener('click', prevSlide);

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

.carousel-slide img {
    width: 100%;
    display: block; /* 默认都显示，但通过opacity控制 */
    opacity: 0; /* 默认透明 */
    position: absolute; /* 让它们堆叠 */
    top: 0;
    left: 0;
    transition: opacity 0.8s ease-in-out; /* 添加过渡效果 */
}

.carousel-slide img.active {
    opacity: 1; /* 激活时完全不透明 */
    z-index: 1; /* 确保激活的图片在最上层 */
}

// 在 showSlide 函数和事件监听器下方添加
let autoPlayInterval;

function startAutoPlay() {
    autoPlayInterval = setInterval(nextSlide, 3000); // 每3秒切换一次
}

function stopAutoPlay() {
    clearInterval(autoPlayInterval);
}

// 页面加载时启动自动播放
startAutoPlay();

// 鼠标悬停时暂停，移开时继续（提升用户体验）
const carouselContainer = document.querySelector('.carousel-container');
carouselContainer.addEventListener('mouseenter', stopAutoPlay);
carouselContainer.addEventListener('mouseleave', startAutoPlay);