HTML&CSS&JS：超级惊艳的全屏图片轮播效果

前端Hardy2025-08-08 16:28

实现了一个简单的图片全屏轮播功能，包含标题、图片和指示点。

大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信回复源码两字，我会发送完整的压缩包给你。

演示效果

HTML&CSS

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>
        @import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&display=swap");

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;

            --primary: #fff;
            --secondary: #2e2d2d;
            --frost: rgba(255, 255, 255, 0.4);
        }

        body {
            height: 100vh;
            margin: 0;
            display: flex;
            align-items: center;
            background-color: var(--primary);
            overflow: hidden;
            transition: all 1s ease-in-out;
        }

        body::before {
            content: "";
            position: fixed;
            inset: 0;
            background-color: rgba(255, 255, 255, 0.2);
            pointer-events: none;
        }

        .card {
            width: 500px;
            height: 200px;
            max-width: 80vw;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1fr;
            border-radius: 5px;
            overflow: hidden;
            background-color: var(--frost);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        }

        .content {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 50;
            background-color: var(--primary);
        }

        #title {
            font-weight: 400;
            font-family: "Cinzel", serif;
            color: var(--secondary);
            font-size: 1.2rem;
        }

        .image {
            overflow: hidden;
        }

        #slide {
            height: 100%;
            width: 100%;
            object-fit: cover;
        }

        .dots {
            width: 100%;
            position: absolute;
            bottom: 10px;
            left: 0;
            display: flex;
            gap: 10px;
            justify-content: center;
            align-items: center;
        }

        .dot {
            height: 15px;
            width: 15px;
            display: inline-block;
            border-radius: 50%;
            background-color: var(--frost);
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .active {
            background-color: var(--primary);
        }

        @keyframes slidein {
            from {
                transform: translateX(-3000px);
            }

            to {
                transform: translateX(0);
            }
        }

        @media (width >=48rem) {
            #title {
                font-size: 2rem;
            }
        }
    </style>
</head>

<body>
    <div class="card">
        <div class="content">
            <h1 id="title">Title</h1>
        </div>
        <div class="image">
            <img src="https://q6.itc.cn/q_70/images03/20250116/b5dba16a1f5749a6a375f20f901d6381.png"
                alt="Photo of Paul Cuoco from Unsplash" id="slide" />
        </div>
    </div>
    <div class="dots">
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
    </div>
    <script>
        const collection = [
            {
                title: "好景",
                imageUrl:
                    "https://q6.itc.cn/q_70/images03/20250116/b5dba16a1f5749a6a375f20f901d6381.png",
                imageAlt: "桂林山水"
            },
            {
                title: "好山",
                imageUrl:
                    "https://img0.baidu.com/it/u=3902947011,207703161&fm=253&app=138&f=JPEG?w=800&h=1455",
                imageAlt: "桂林山水"
            },
            {
                title: "好水",
                imageUrl:
                    "https://img0.baidu.com/it/u=4091158592,2102354044&fm=253&app=138&f=JPEG?w=800&h=1455",
                imageAlt: "桂林山水"
            }
        ];

        const slideEl = document.getElementById("slide");
        const dots = document.getElementsByClassName("dot");
        const titleEl = document.getElementById("title");
        let current = 0;

        function getCurrentSlide(n) {
            current = n;
            slideEl.src = collection[n].imageUrl;
            slideEl.alt = collection[n].imageAlt;
            titleEl.textContent = collection[n].title;

            slideEl.style.animation = "none";
            void slideEl.offsetWidth;
            slideEl.style.animation = "slidein 0.5s ease-in-out forwards";

            document.body.style.background = `url(${collection[n].imageUrl})`;
            document.body.style.backgroundPosition = "center";
            document.body.style.backgroundSize = "cover";

            Array.from(dots).forEach((dot, index) => {
                if (index === n) {
                    dot.classList.add("active");
                } else {
                    dot.classList.remove("active");
                }
            });
        }

        Array.from(dots).forEach((dot, index) => {
            dot.addEventListener("click", () => {
                getCurrentSlide(index);
            });
        });

        document.addEventListener("DOMContentLoaded", () => {
            getCurrentSlide(current);

            setInterval(() => {
                current = (current + 1) % collection.length;
                getCurrentSlide(current);
            }, 2000);
        });

    </script>
</body>

</html>

HTML

  • card：卡片容器，包含内容和图片。
  • content：内容区域，包含标题。
  • image：图片区域，包含一个 img 标签。
  • dots：指示点容器，包含三个指示点。
  • script：内联 JavaScript 逻辑。

CSS

  • @import：引入 Google 字体。 *：全局样式，设置默- 认的边距、填充和盒模型。
  • body：设置页面背景颜色、高度和过渡效果。
  • body::before：创建一个半透明的覆盖层。
  • .card：定义卡片的大小、布局和样式。
  • .content：定义内容区域的布局。
  • #title：设置标题的字体、颜色和大小。
  • .image：定义图片区域的样式。
  • #slide：设置图片的样式，确保图片覆盖整个区域。
  • .dots：定义指示点的布局。
  • .dot：定义单个指示点的样式。
  • .active：定义活动指示点的样式。
  • @keyframes slidein：定义图片滑入的动画效果。
  • @media：响应式设计，调整标题大小。

JavaScript

js 复制代码 
const collection = [
    {
        title: "好景",
        imageUrl: "https://q6.itc.cn/q_70/images03/20250116/b5dba16a1f5749a6a375f20f901d6381.png",
        imageAlt: "桂林山水"
    },
    {
        title: "好山",
        imageUrl: "https://img0.baidu.com/it/u=3902947011,207703161&fm=253&app=138&f=JPEG?w=800&h=1455",
        imageAlt: "桂林山水"
    },
    {
        title: "好水",
        imageUrl: "https://img0.baidu.com/it/u=4091158592,2102354044&fm=253&app=138&f=JPEG?w=800&h=1455",
        imageAlt: "桂林山水"
    }
];

const slideEl = document.getElementById("slide");
const dots = document.getElementsByClassName("dot");
const titleEl = document.getElementById("title");
let current = 0;

function getCurrentSlide(n) {
    current = n;
    slideEl.src = collection[n].imageUrl;
    slideEl.alt = collection[n].imageAlt;
    titleEl.textContent = collection[n].title;

    slideEl.style.animation = "none";
    void slideEl.offsetWidth;
    slideEl.style.animation = "slidein 0.5s ease-in-out forwards";

    document.body.style.background = `url(${collection[n].imageUrl})`;
    document.body.style.backgroundPosition = "center";
    document.body.style.backgroundSize = "cover";

    Array.from(dots).forEach((dot, index) => {
        if (index === n) {
            dot.classList.add("active");
        } else {
            dot.classList.remove("active");
        }
    });
}

Array.from(dots).forEach((dot, index) => {
    dot.addEventListener("click", () => {
        getCurrentSlide(index);
    });
});

document.addEventListener("DOMContentLoaded", () => {
    getCurrentSlide(current);

    setInterval(() => {
        current = (current + 1) % collection.length;
        getCurrentSlide(current);
    }, 2000);
});
  • collection：定义了一个包含图片信息的数组，每张图片有标题、图片 URL 和描述。
  • slideEl、dots、titleEl：获取页面中的图片、指示点和标题元素。
  • current：当前显示的图片索引。

各位互联网搭子，要是这篇文章成功引起了你的注意，别犹豫，关注、点赞、评论、分享走一波，让我们把这份默契延续下去，一起在知识的海洋里乘风破浪！

相关推荐
程序视点23 分钟前
如何高效率使用 Cursor ？
前端·后端·cursor
前端领航者24 分钟前
重学Vue3《 v-for的key属性：性能差异与最佳实践》
前端·javascript
归于尽24 分钟前
跨域问题从青铜到王者：JSONP、CORS原理详解与实战（前端必会）
前端·浏览器
Andy_GF35 分钟前
纯血鸿蒙HarmonyOS Next 远程测试包分发
前端·ios·harmonyos
嗑药狂写9W行代码1 小时前
cesium修改源码支持4490坐标系
前端
小山不高1 小时前
react实现leaferjs编辑器之形状裁剪功能点
前端
20261 小时前
13.2 ssr基本原理，构建步骤
前端·vue.js
cpp加油站1 小时前
打脸来的太快了，又发现一个Trae的宝藏功能--内置浏览器可以指定机型来显示前端界面
前端·ai编程·trae
Web极客码1 小时前
如何为WordPress启用LiteSpeed缓存
前端·缓存
咕噜分发企业签名APP加固彭于晏2 小时前
白嫖价值千元的EO
前端·javascript
热门推荐
01全球最强模型Grok4，国内已可免费使用！（附教程）02Qwen3-Coder 快速上手教程 | Qwen Code + Claude Code03UV安装并设置国内源04ChatGPT 5发布日期揭秘：2025年8月上线，多模态推理能力全面升级05KGG转MP3工具|非KGM文件|解密音频06OpenAI重返开源！GPT-OSS本地部署完全指南07如何在 Cursor 中继续使用 Claude08Cursor 终端“卡死/无响应”问题的解法09腾讯还是太全面了，限时免费！超全CodeBuddy IDE保姆级教程！（附案例）10Claude Code 效率实战指南：从入门到精通的实用技巧（附安装教程）