js 轮播图

作者：若此生已赞。发布日期:2025-09-10 浏览:46

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS 轮播图</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .carousel {
            width: 600px;
            height: 400px;
            overflow: hidden;
            position: relative;
            margin: 50px auto;
        }
        .carousel img {
            width: 100%;
            height: 100%;
            display: none;
        }
        .carousel img:first-child {
            display: block;
        }
        .carousel .dots {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
        }
        .carousel .dots span {
            display: inline-block;
            width: 15px;
            height: 15px;
            background-color: #ccc;
            border-radius: 50%;
            margin: 0 5px;
            cursor: pointer;
        }
        .carousel .dots span.active {
            background-color: #333;
        }
    </style>
</head>
<body>
    <div class="carousel">
        <img src="https://via.placeholder.com/600x400?text=Slide+1" alt="Slide 1">
        <img src="https://via.placeholder.com/600x400?text=Slide+2" alt="Slide 2">
        <img src="https://via.placeholder.com/600x400?text=Slide+3" alt="Slide 3">
        <div class="dots">
            <span class="active"></span>
            <span></span>
            <span></span>
        </div>
    </div>

    <script>
        // 获取轮播图和小圆点元素
        const carousel = document.querySelector('.carousel');
        const images = carousel.querySelectorAll('img');
        const dots = carousel.querySelectorAll('.dots span');

        let currentIndex = 0;

        // 切换图片函数
        function changeImage(index) {
            images[currentIndex].classList.remove('active');
            dots[currentIndex].classList.remove('active');

            currentIndex = index;

            images[currentIndex].classList.add('active');
            dots[currentIndex].classList.add('active');
        }

        // 自动切换图片
        function autoChangeImage() {
            setInterval(() => {
                let nextIndex = (currentIndex + 1) % images.length;
                changeImage(nextIndex);
            }, 3000); // 每3秒切换一次
        }

        // 点击小圆点切换图片
        dots.forEach((dot, index) => {
            dot.addEventListener('click', () => {
                changeImage(index);
            });
        });

        // 初始化自动切换
        autoChangeImage();
    </script>
</body>
</html>

解释说明：

HTML部分：
- 创建了一个包含多张图片的轮播图容器 .carousel。
- 每张图片使用 <img> 标签展示，并且初始状态下只显示第一张图片。
- 使用 .dots 容器来放置小圆点，用于手动切换图片。
CSS部分：
- 设置了轮播图的样式，包括宽度、高度、溢出隐藏等。
- 图片默认是隐藏的（display: none），只有第一张图片是可见的（display: block）。
- 小圆点的样式设置为圆形，并且当前选中的小圆点会有不同的背景颜色。
JavaScript部分：
- 获取所有图片和小圆点元素。
- 定义 changeImage 函数用于切换图片和更新小圆点状态。
- 使用 setInterval 实现自动切换图片的功能，每3秒切换一次。
- 给每个小圆点添加点击事件监听器，点击时可以手动切换到对应的图片。
- 最后调用 autoChangeImage 函数启动自动切换功能。

上一篇：js 点击按钮

下一篇：js class 静态方法