图片轮播js代码讲解

图片轮播是一种常见的网页设计功能，用于自动或手动切换显示一系列图片。下面是一个简单的JavaScript图片轮播代码示例，并对其进行详细讲解。

HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片轮播</title>
    <style>
        #slider {
            width: 600px;
            height: 400px;
            overflow: hidden;
            position: relative;
        }
        #slider img {
            width: 100%;
            height: auto;
            position: absolute;
            opacity: 0;
            transition: opacity 1s ease-in-out;
        }
        #slider img.active {
            opacity: 1;
        }
    </style>
</head>
<body>
    <div id="slider">
        <img src="image1.jpg" alt="Image 1" class="active">
        <img src="image2.jpg" alt="Image 2">
        <img src="image3.jpg" alt="Image 3">
    </div>
    <button onclick="prevImage()">Prev</button>
    <button onclick="nextImage()">Next</button>

    <script src="slider.js"></script>
</body>
</html>

JavaScript代码

// slider.js
let currentIndex = 0;
const images = document.querySelectorAll('#slider img');
const totalImages = images.length;

function showImage(index) {
    images.forEach((img, i) => {
        img.classList.remove('active');
    });
    images[index].classList.add('active');
}

function nextImage() {
    currentIndex = (currentIndex + 1) % totalImages;
    showImage(currentIndex);
}

function prevImage() {
    currentIndex = (currentIndex - 1 + totalImages) % totalImages;
    showImage(currentIndex);
}

// 自动轮播
setInterval(nextImage, 3000);

代码讲解

HTML结构:
- 创建一个div容器，其id为slider，用于包含所有图片。
- 每个图片元素都有一个初始的opacity为0，并且第一个图片有一个active类，使其初始显示。
- 添加两个按钮用于手动切换图片。

CSS样式:
- #slider设置了固定宽度和高度，并使用overflow: hidden来隐藏超出容器的内容。
- 图片使用绝对定位，使得它们重叠在一起。
- 通过opacity和transition属性实现淡入淡出效果。
JavaScript功能:
- currentIndex变量用于跟踪当前显示的图片索引。
- images变量存储所有图片元素的NodeList。
- showImage(index)函数负责显示指定索引的图片，并隐藏其他图片。
- nextImage()和prevImage()函数分别用于切换到下一张和上一张图片，使用模运算确保索引在有效范围内循环。
- setInterval(nextImage, 3000)用于每3秒自动切换到下一张图片。