html图片轮播

作者：掌心余温发布日期:2025-12-14 浏览:69

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 图片轮播</title>
    <style>
        /* 设置轮播容器的样式 */
        .carousel {
            width: 600px;
            height: 400px;
            overflow: hidden;
            position: relative;
            margin: 0 auto;
        }

        /* 设置图片容器的样式 */
        .carousel-inner {
            display: flex;
            transition: transform 0.5s ease-in-out;
        }

        /* 设置每张图片的样式 */
        .carousel-item {
            min-width: 100%;
            height: 100%;
        }

        /* 设置图片的样式 */
        .carousel-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

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

        .carousel-indicator {
            width: 15px;
            height: 15px;
            background-color: #fff;
            border-radius: 50%;
            cursor: pointer;
            opacity: 0.5;
        }

        .carousel-indicator.active {
            opacity: 1;
        }
    </style>
</head>
<body>
    <div class="carousel">
        <div class="carousel-inner" id="carouselInner">
            <div class="carousel-item">
                <img src="https://via.placeholder.com/600x400?text=Image+1" alt="Image 1">
            </div>
            <div class="carousel-item">
                <img src="https://via.placeholder.com/600x400?text=Image+2" alt="Image 2">
            </div>
            <div class="carousel-item">
                <img src="https://via.placeholder.com/600x400?text=Image+3" alt="Image 3">
            </div>
        </div>
        <div class="carousel-indicators" id="carouselIndicators">
            <div class="carousel-indicator active"></div>
            <div class="carousel-indicator"></div>
            <div class="carousel-indicator"></div>
        </div>
    </div>

    <script>
        // 获取轮播容器和指示器
        const carouselInner = document.getElementById('carouselInner');
        const carouselIndicators = document.getElementById('carouselIndicators').children;
        let currentIndex = 0;

        // 更新轮播位置和指示器状态
        function updateCarousel(index) {
            currentIndex = index;
            const offset = -currentIndex * 100;
            carouselInner.style.transform = `translateX(${offset}%)`;

            // 更新指示器状态
            for (let i = 0; i < carouselIndicators.length; i++) {
                carouselIndicators[i].classList.toggle('active', i === currentIndex);
            }
        }

        // 添加点击事件监听器到每个指示器
        for (let i = 0; i < carouselIndicators.length; i++) {
            carouselIndicators[i].addEventListener('click', () => updateCarousel(i));
        }

        // 自动轮播功能
        setInterval(() => {
            const nextIndex = (currentIndex + 1) % carouselIndicators.length;
            updateCarousel(nextIndex);
        }, 3000); // 每3秒切换一次图片
    </script>
</body>
</html>

解释说明

HTML 结构:
- 使用了一个 div 容器来包裹整个轮播图，内部包含一个 carousel-inner 容器用于放置图片，并使用 flex 布局让图片水平排列。
- 另外还有一个 carousel-indicators 容器用于放置轮播图的指示器（小圆点）。
CSS 样式:
- carousel 类设置了固定的宽度和高度，并隐藏溢出的内容。
- carousel-inner 使用了 flex 布局，并添加了过渡效果以实现平滑的图片切换。
- carousel-item 和 img 设置了宽度和高度为100%，确保图片充满整个轮播区域。
- carousel-indicators 和 carousel-indicator 设置了指示器的样式，并通过 active 类来高亮当前选中的指示器。
JavaScript 功能:
- updateCarousel 函数用于更新轮播图的位置和指示器的状态。
- 给每个指示器添加了点击事件监听器，点击时会调用 updateCarousel 切换到对应的图片。
- 使用 setInterval 实现了自动轮播功能，每隔3秒切换一次图片。

上一篇：html td 内自动换行

下一篇：html 转义符