html图片轮播代码

作者：嗜血苍狼发布日期:2026-01-16 浏览:71

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

        /* 图片列表样式 */
        #carousel ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        /* 每张图片的样式 */
        #carousel li {
            width: 100%;
            height: 100%;
            position: absolute;
            opacity: 0;
            transition: opacity 1s ease-in-out;
        }

        /* 显示当前图片 */
        #carousel li.active {
            opacity: 1;
        }
    </style>
</head>
<body>
    <div id="carousel">
        <ul>
            <li class="active"><img src="image1.jpg" alt="Image 1" style="width:100%;height:100%;"></li>
            <li><img src="image2.jpg" alt="Image 2" style="width:100%;height:100%;"></li>
            <li><img src="image3.jpg" alt="Image 3" style="width:100%;height:100%;"></li>
        </ul>
    </div>

    <script>
        // 获取所有图片元素
        const slides = document.querySelectorAll('#carousel li');
        let currentIndex = 0;

        // 自动切换图片的函数
        function nextSlide() {
            // 移除当前图片的 active 类
            slides[currentIndex].classList.remove('active');

            // 更新当前索引
            currentIndex = (currentIndex + 1) % slides.length;

            // 给下一张图片添加 active 类
            slides[currentIndex].classList.add('active');
        }

        // 每3秒切换一次图片
        setInterval(nextSlide, 3000);
    </script>
</body>
</html>

解释说明：

HTML 结构：
- #carousel 是一个包含图片轮播的容器。
- ul 列表中的每个 li 元素代表一张图片，每张图片用 <img> 标签展示。
CSS 样式：
- #carousel 设置了固定宽度和高度，并隐藏溢出内容。
- ul 和 li 的样式确保图片在容器内正确显示。
- li.active 类用于控制当前显示的图片，通过设置 opacity 实现淡入淡出效果。
JavaScript 功能：
- nextSlide 函数负责切换图片，移除当前图片的 active 类并给下一张图片添加 active 类。
- 使用 setInterval 每隔 3 秒自动调用 nextSlide 函数实现自动轮播。

上一篇：html中i标签的作用

下一篇：html 多选