如何实现HTML轮播效果？代码示例有哪些？-网页设计-锦华智联科技

纯 CSS 实现轮播图（最简单）

这种方法使用纯 CSS 动画，代码量少，性能好，但功能相对简单（通常只有自动播放和手动切换）。

（图片来源网络，侵删）

特点：

代码简洁,易于理解和实现。
无需 JavaScript,性能优秀。
适合作为网站背景或装饰性轮播。

代码示例

您可以直接将以下代码保存为 .html 文件并在浏览器中打开。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">纯 CSS 轮播图</title>
    <style>
        /* 基础样式重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: 'Arial', sans-serif;
        }
        .carousel-container {
            width: 800px;
            height: 450px;
            margin: 50px auto;
            overflow: hidden; /* 隐藏溢出的图片 */
            position: relative; /* 作为内部绝对定位的参考 */
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        }
        .carousel-slide {
            display: flex; /* 使用 Flexbox 水平排列图片 */
            width: 400%; /* 4张图片，所以宽度是400% */
            height: 100%;
            animation: slide 12s infinite; /* 设置动画：名称 时长 播放次数(infinite为无限) */
        }
        .carousel-slide img {
            width: 25%; /* 每张图片占容器宽度的25% */
            height: 100%;
            object-fit: cover; /* 保证图片填充且不变形 */
        }
        /* 核心动画：将图片组向左移动 */
        @keyframes slide {
            0% { transform: translateX(0); } /* 显示第1张 */
            25% { transform: translateX(-25%); } /* 显示第2张 */
            50% { transform: translateX(-50%); } /* 显示第3张 */
            75% { transform: translateX(-75%); } /* 显示第4张 */
            100% { transform: translateX(0); } /* 回到第1张，形成循环 */
        }
        /* 可选：添加一些简单的指示器 */
        .indicators {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 10px;
        }
        .indicator {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.5);
            cursor: pointer;
        }
        .indicator.active {
            background-color: white;
        }
    </style>
</head>
<body>
    <div class="carousel-container">
        <div class="carousel-slide">
            <!-- 使用 picsum.photos 生成随机图片，您也可以替换成自己的图片链接 -->
            <img src="https://picsum.photos/seed/slide1/800/450.jpg" alt="Slide 1">
            <img src="https://picsum.photos/seed/slide2/800/450.jpg" alt="Slide 2">
            <img src="https://picsum.photos/seed/slide3/800/450.jpg" alt="Slide 3">
            <img src="https://picsum.photos/seed/slide4/800/450.jpg" alt="Slide 4">
        </div>
        <div class="indicators">
            <div class="indicator active"></div>
            <div class="indicator"></div>
            <div class="indicator"></div>
            <div class="indicator"></div>
        </div>
    </div>
</body>
</html>

JavaScript 实现轮播图（功能更全）

这种方法使用 JavaScript 来控制轮播，可以实现更丰富的交互功能，如：左右箭头切换、点击指示器跳转、悬停暂停等。

特点：

（图片来源网络，侵删）

功能强大,交互灵活。
是目前网站中最常见的轮播图实现方式。
逻辑清晰,易于扩展。

代码示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">JavaScript 轮播图</title>
    <style>
        /* 基础样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f4f4f4;
        }
        .carousel-wrapper {
            width: 800px;
            max-width: 100%; /* 响应式设计 */
            margin: 50px auto;
            position: relative;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        }
        .carousel-container {
            width: 100%;
            height: 450px;
            overflow: hidden;
        }
        .carousel-track {
            display: flex;
            width: 400%; /* 4张图片 */
            height: 100%;
            transition: transform 0.5s ease-in-out; /* 平滑过渡效果 */
        }
        .carousel-slide {
            width: 25%;
            height: 100%;
        }
        .carousel-slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        /* 左右箭头 */
        .carousel-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            border: none;
            font-size: 24px;
            padding: 15px 20px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .carousel-btn:hover {
            background-color: rgba(0, 0, 0, 0.8);
        }
        .carousel-btn.prev {
            left: 10px;
            border-radius: 0 5px 5px 0;
        }
        .carousel-btn.next {
            right: 10px;
            border-radius: 5px 0 0 5px;
        }
        /* 指示器 */
        .indicators {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 10px;
        }
        .indicator {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.5);
            cursor: pointer;
        }
        .indicator.active {
            background-color: white;
        }
    </style>
</head>
<body>
    <div class="carousel-wrapper">
        <div class="carousel-container">
            <div class="carousel-track">
                <div class="carousel-slide">
                    <img src="https://picsum.photos/seed/js1/800/450.jpg" alt="Slide 1">
                </div>
                <div class="carousel-slide">
                    <img src="https://picsum.photos/seed/js2/800/450.jpg" alt="Slide 2">
                </div>
                <div class="carousel-slide">
                    <img src="https://picsum.photos/seed/js3/800/450.jpg" alt="Slide 3">
                </div>
                <div class="carousel-slide">
                    <img src="https://picsum.photos/seed/js4/800/450.jpg" alt="Slide 4">
                </div>
            </div>
        </div>
        <button class="carousel-btn prev">&#10094;</button>
        <button class="carousel-btn next">&#10095;</button>
        <div class="indicators">
            <div class="indicator active" data-index="0"></div>
            <div class="indicator" data-index="1"></div>
            <div class="indicator" data-index="2"></div>
            <div class="indicator" data-index="3"></div>
        </div>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const track = document.querySelector('.carousel-track');
            const slides = document.querySelectorAll('.carousel-slide');
            const prevBtn = document.querySelector('.carousel-btn.prev');
            const nextBtn = document.querySelector('.carousel-btn.next');
            const indicators = document.querySelectorAll('.indicator');
            let currentIndex = 0;
            const totalSlides = slides.length;
            const slideWidth = 100 / totalSlides; // 每张幻灯片占轨道的百分比
            // 设置轨道初始宽度
            track.style.width = `${totalSlides * 100}%`;
            // 更新轮播位置和指示器
            function updateCarousel() {
                // 移动轨道
                track.style.transform = `translateX(-${currentIndex * slideWidth}%)`;
                // 更新指示器
                indicators.forEach((indicator, index) => {
                    indicator.classList.toggle('active', index === currentIndex);
                });
            }
            // 下一张
            function nextSlide() {
                currentIndex = (currentIndex + 1) % totalSlides;
                updateCarousel();
            }
            // 上一张
            function prevSlide() {
                currentIndex = (currentIndex - 1 + totalSlides) % totalSlides;
                updateCarousel();
            }
            // 绑定按钮事件
            nextBtn.addEventListener('click', nextSlide);
            prevBtn.addEventListener('click', prevSlide);
            // 绑定指示器点击事件
            indicators.forEach(indicator => {
                indicator.addEventListener('click', () => {
                    currentIndex = parseInt(indicator.getAttribute('data-index'));
                    updateCarousel();
                });
            });
            // 自动播放
            let autoPlayInterval = setInterval(nextSlide, 3000); // 每3秒切换一次
            // 鼠标悬停时暂停，移出时继续
            const wrapper = document.querySelector('.carousel-wrapper');
            wrapper.addEventListener('mouseenter', () => {
                clearInterval(autoPlayInterval);
            });
            wrapper.addEventListener('mouseleave', () => {
                autoPlayInterval = setInterval(nextSlide, 3000);
            });
        });
    </script>
</body>
</html>

使用专业轮播库（Swiper.js） - 推荐

在实际项目中，我们强烈建议使用成熟的轮播库，如 Swiper.js，它提供了丰富的功能、强大的自定义选项和优秀的性能，并且经过大量用户测试,非常稳定。

特点：

功能强大：内置触摸滑动、无限循环、分页、导航、滚动条、自动播放、懒加载等几乎所有你想要的功能。
高度可定制：通过简单的 CSS 和 JS 配置,就能实现各种复杂效果。
响应式：默认支持各种屏幕尺寸。
性能优异：使用 CSS3 Transform 和 GPU 加速,动画流畅。
文档完善：有非常详尽的官方文档和示例。

代码示例 (使用 Swiper.js)

第一步： 引入 Swiper 的 CSS 和 JS 文件，你可以从 Swiper 官网下载，或者使用 CDN 链接。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">Swiper.js 轮播图</title>
    <!-- Swiper CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
    <style>
        body {
            background-color: #eee;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color: #000;
            margin: 0;
            padding: 0;
        }
        .swiper {
            width: 100%;
            height: 500px;
            padding-top: 50px;
            padding-bottom: 50px;
        }
        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .swiper-slide img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    </style>
</head>
<body>
    <!-- Swiper -->
    <div class="swiper mySwiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="https://swiperjs.com/demos/images/nature-1.jpg" />
            </div>
            <div class="swiper-slide">
                <img src="https://swiperjs.com/demos/images/nature-2.jpg" />
            </div>
            <div class="swiper-slide">
                <img src="https://swiperjs.com/demos/images/nature-3.jpg" />
            </div>
            <div class="swiper-slide">
                <img src="https://swiperjs.com/demos/images/nature-4.jpg" />
            </div>
            <div class="swiper-slide">
                <img src="https://swiperjs.com/demos/images/nature-5.jpg" />
            </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
        <!-- 如果需要滚动条 -->
        <div class="swiper-scrollbar"></div>
    </div>
    <!-- Swiper JS -->
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
    <!-- Initialize Swiper -->
    <script>
        var swiper = new Swiper(".mySwiper", {
            // 核心配置
            slidesPerView: 1, // 同时显示的slide数量
            spaceBetween: 30, // slide之间的间距
            loop: true, // 循环模式
            // 自动播放
            autoplay: {
                delay: 2500, // 切换延迟
                disableOnInteraction: false, // 用户操作后是否停止
            },
            // 分页器
            pagination: {
                el: ".swiper-pagination",
                clickable: true, // 点击分页器切换slide
            },
            // 导航按钮
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
            // 滚动条
            scrollbar: {
                el: ".swiper-scrollbar",
            },
        });
    </script>
</body>
</html>

如何选择？

新手学习/简单场景：选择 方案一 (纯 CSS)，快速入门,理解轮播的基本原理。
项目开发/需要定制功能：选择 方案二 (原生 JS)，可以完全控制代码,适合有特定需求且不想引入外部库的场景。
实际商业项目/追求效率和稳定性：强烈推荐 方案三 (Swiper.js)，它能为你节省大量开发和调试时间,并提供专业级的用户体验。

（图片来源网络，侵删）