图片轮播

自动轮播或手动切换图片

1 / 3

图片 1

这是第一张图片的描述

2 / 3

图片 2

这是第二张图片的描述

3 / 3

图片 3

这是第三张图片的描述

核心代码

let slideIndex = 0;
let autoPlayInterval;

function showSlides() {
    const slides = document.getElementsByClassName("slide");
    const dots = document.getElementsByClassName("dot");

    for (let i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
        dots[i].className = dots[i].className.replace(" active", "");
    }

    slideIndex++;
    if (slideIndex > slides.length) {
        slideIndex = 1;
    }

    slides[slideIndex - 1].style.display = "block";
    dots[slideIndex - 1].className += " active";
}

function changeSlide(n) {
    slideIndex += n - 1;
    showSlides();
}

function currentSlide(n) {
    slideIndex = n;
    showSlides();
}