html三张图片的轮播代码

作者：碎花洋裙的优雅发布日期:2025-11-04 浏览:33

<!DOCTYPE html>
<html>
<head>
    <title>图片轮播示例</title>
    <style>
        /* 设置轮播容器的样式 */
        #carousel {
            width: 300px;
            height: 200px;
            overflow: hidden;
            position: relative;
        }

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

        /* 设置初始显示的第一张图片 */
        #carousel img:first-child {
            opacity: 1;
        }
    </style>
</head>
<body>
    <div id="carousel">
        <img src="image1.jpg" alt="图片1">
        <img src="image2.jpg" alt="图片2">
        <img src="image3.jpg" alt="图片3">
    </div>

    <script>
        // 获取所有图片元素
        var images = document.querySelectorAll('#carousel img');
        var currentIndex = 0;

        // 定义切换图片的函数
        function changeImage() {
            // 将当前图片的透明度设置为0
            images[currentIndex].style.opacity = 0;

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

            // 将下一张图片的透明度设置为1
            images[currentIndex].style.opacity = 1;
        }

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

解释说明：

HTML部分：创建了一个包含三张图片的<div>容器，每张图片都设置了alt属性用于描述图片内容。
CSS部分：
- #carousel：设置轮播容器的宽度、高度，并隐藏溢出的内容。
- #carousel img：将所有图片设置为绝对定位，初始透明度为0，并添加过渡效果以实现平滑切换。
- #carousel img:first-child：将第一张图片的透明度设置为1，使其在页面加载时可见。
JavaScript部分：
- 使用querySelectorAll获取所有图片元素，并初始化当前索引currentIndex为0。
- changeImage函数：每次调用时将当前图片的透明度设置为0，更新索引并设置下一张图片的透明度为1。
- 使用setInterval每隔3秒调用一次changeImage函数，实现图片轮播效果。

上一篇：html 横线

下一篇：在线运行html