使用HTML、CSS和JavaScript构建响应式图片轮播图教程

<div class="slideshow-container">
    <!-- 单个幻灯片 -->
    <div class="mySlides fade">
        <img src="./images/insidelook1.jpg" style="width: 100%" alt="Image 1">
    </div>

    <div class="mySlides fade">
        <img src="./images/insidelook2.jpg" style="width: 100%" alt="Image 2">
    </div>

    <div class="mySlides fade">
        <img src="./images/insidelook3.jpg" style="width: 100%" alt="Image 3">
    </div>

    <!-- 前/后导航按钮 -->
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>

<!-- 底部指示点 -->
<div style="text-align:center">
    <span class="dot" onclick="currentSlide(1)"></span>
    <span class="dot" onclick="currentSlide(2)"></span>
    <span class="dot" onclick="currentSlide(3)"></span>
</div>

/* 轮播图容器 */
.slideshow-container {
    position: relative; /* 相对定位，以便子元素可以绝对定位 */
    max-width: 1000px; /* 最大宽度 */
    margin: auto; /* 居中显示 */
}

/* 隐藏所有幻灯片，这是实现轮播的关键 */
.mySlides {
    display: none;
}

/* 前/后导航按钮样式 */
.prev, .next {
    cursor: pointer; /* 鼠标悬停时显示手型 */
    position: absolute; /* 绝对定位，相对于 .slideshow-container */
    top: 50%; /* 垂直居中 */
    width: auto;
    margin-top: -22px; /* 微调垂直位置 */
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease; /* 过渡效果 */
    border-radius: 0 3px 3px 0;
    user-select: none; /* 禁止文本选择 */
}

/* "下一张"按钮靠右 */
.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

/* 导航按钮悬停效果 */
.prev:hover, .next:hover {
    background-color: rgba(0,0,0,0.34); /* 半透明背景 */
}

/* 底部指示点样式 */
.dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb; /* 默认背景色 */
    border-radius: 50%; /* 圆形 */
    display: inline-block; /* 行内块元素，使它们水平排列 */
    transition: background-color 0.6s ease;
}

/* 当前活动指示点及悬停效果 */
.active, .dot:hover {
    background-color: #717171; /* 活动或悬停时的背景色 */
}

/* 渐入渐出动画 */
.fade {
    animation-name: fade;
    animation-duration: 1.0s;
}

@keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
}

let slideIndex = 1; // 当前幻灯片的索引，从1开始
showSlides(slideIndex); // 初始化显示第一张幻灯片

// 切换到下一张/上一张幻灯片
function plusSlides(n) {
    showSlides(slideIndex += n);
}

// 直接跳转到指定幻灯片
function currentSlide(n) {
    showSlides(slideIndex = n);
}

// 显示幻灯片的核心函数
function showSlides(n) {
    let i;
    let slides = document.getElementsByClassName("mySlides"); // 获取所有幻灯片
    let dots = document.getElementsByClassName("dot"); // 获取所有指示点

    // 循环处理，确保索引在有效范围内
    if (n > slides.length) {
        slideIndex = 1; // 如果超出最大值，回到第一张
    }
    if (n < 1) {
        slideIndex = slides.length; // 如果小于最小值，回到最后一张
    }

    // 隐藏所有幻灯片
    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
    }

    // 移除所有指示点的 'active' 类
    for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active", "");
    }

    // 显示当前幻灯片
    slides[slideIndex - 1].style.display = "block"; // slideIndex 是从1开始，数组索引从0开始
    // 为当前指示点添加 'active' 类
    dots[slideIndex - 1].className += " active";
}