html+js 轮播图 - 技术栈

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>
        /* 基本样式 */
        body {
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
            font-family: Arial, sans-serif;
        }

        /* 轮播图容器 */
        .carousel {
            width: 600px;
            height: 400px;
            position: relative;
            overflow: hidden;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        }

        /* 图片容器 */
        .carousel-images {
            display: flex;
            width: 100%;
            height: 100%;
            transition: transform 0.5s ease-in-out;
        }

        /* 图片样式 */
        .carousel-images img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            flex-shrink: 0;
        }

        /* 左右按钮 */
        .carousel-button {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            border: none;
            padding: 10px;
            cursor: pointer;
            font-size: 18px;
            border-radius: 50%;
            transition: background-color 0.3s ease;
        }

        .carousel-button:hover {
            background-color: rgba(0, 0, 0, 0.8);
        }

        /* 左按钮 */
        .carousel-button.prev {
            left: 10px;
        }

        /* 右按钮 */
        .carousel-button.next {
            right: 10px;
        }

        /* 指示器容器 */
        .carousel-indicators {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 5px;
        }

        /* 指示器样式 */
        .carousel-indicators span {
            width: 10px;
            height: 10px;
            background-color: rgba(255, 255, 255, 0.5);
            border-radius: 50%;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .carousel-indicators span.active {
            background-color: white;
        }
    </style>
</head>
<body>
    <!-- 轮播图容器 -->
    <div class="carousel">
        <!-- 图片容器 -->
        <div class="carousel-images">
            <img src="https://image.meiye.art/pic_1631411429199mjIE7yxqjZxWNdOvWLxL2?imageMogr2/thumbnail/640x/interlace/1" alt="Image 1">
            <img src="https://image.meiye.art/pic_16324946992753vSLEv0P2s-1PY95ynOZn?imageMogr2/thumbnail/640x/interlace/1" alt="Image 2">
            <img src="https://image.meiye.art/pic_1628403749737?imageMogr2/thumbnail/640x/interlace/1" alt="Image 3">
        </div>

        <!-- 左右按钮 -->
        <button class="carousel-button prev">&lt;</button>
        <button class="carousel-button next">&gt;</button>

        <!-- 指示器 -->
        <div class="carousel-indicators">
            <span class="active"></span>
            <span></span>
            <span></span>
        </div>
    </div>

    <script>
        // 获取元素
        const carouselImages = document.querySelector('.carousel-images');
        const prevButton = document.querySelector('.carousel-button.prev');
        const nextButton = document.querySelector('.carousel-button.next');
        const indicators = document.querySelectorAll('.carousel-indicators span');

        let currentIndex = 0; // 当前显示的图片索引
        const totalImages = carouselImages.children.length; // 图片总数

        // 更新指示器状态
        function updateIndicators() {
            indicators.forEach((indicator, index) => {
                indicator.classList.toggle('active', index === currentIndex);
            });
        }

        // 切换到指定图片
        function goToImage(index) {
            if (index < 0) {
                index = totalImages - 1; // 如果小于0，切换到最后一张
            } else if (index >= totalImages) {
                index = 0; // 如果超出范围，切换到第一张
            }
            currentIndex = index;
            carouselImages.style.transform = `translateX(-${currentIndex * 100}%)`;
            updateIndicators();
        }

        // 切换到上一张图片
        prevButton.addEventListener('click', () => {
            goToImage(currentIndex - 1);
        });

        // 切换到下一张图片
        nextButton.addEventListener('click', () => {
            goToImage(currentIndex + 1);
        });

        // 点击指示器切换图片
        indicators.forEach((indicator, index) => {
            indicator.addEventListener('click', () => {
                goToImage(index);
            });
        });

        // 自动播放
        let autoPlayInterval = setInterval(() => {
            goToImage(currentIndex + 1);
        }, 3000);

        // 鼠标悬停时停止自动播放
        const carousel = document.querySelector('.carousel');
        carousel.addEventListener('mouseenter', () => {
            clearInterval(autoPlayInterval);
        });

        // 鼠标离开时恢复自动播放
        carousel.addEventListener('mouseleave', () => {
            autoPlayInterval = setInterval(() => {
                goToImage(currentIndex + 1);
            }, 3000);
        });
    </script>
</body>
</html>