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：当前显示的图片索引。

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

相关推荐
excel2 分钟前
Vue 3 实现高性能虚拟列表：Spacer 占位 vs Absolute 定位，哪种更优？
前端
SoaringHeart31 分钟前
Flutter进阶：实现比赛对阵图/淘汰赛
前端·flutter
.用户昵称已存在.1 小时前
HTML 核心元素实战：超链接、iframe 框架与 form 表单全面解析
前端·microsoft·html
MediaTea10 小时前
Python 第三方库：lxml（高性能 XML/HTML 解析与处理）
xml·开发语言·前端·python·html
西陵10 小时前
Nx带来极致的前端开发体验——使用MF进行增量构建
前端·javascript·架构
Nicholas6810 小时前
flutter滚动视图之ProxyWidget、ProxyElement、NotifiableElementMixin源码解析(九)
前端
狂炫一碗大米饭11 小时前
使用 Tailwind CSS 创建自定义动画
css
JackieDYH11 小时前
vue3中reactive和ref如何使用和区别
前端·javascript·vue.js
伍哥的传说11 小时前
解密 Vue 3 shallowRef：浅层响应式 vs 深度响应式的性能对决
javascript·vue.js·ecmascript·vue3.js·大数据处理·响应式系统·shallowref
热门推荐
01UV安装并设置国内源02不再让Windows更新！&Edge游戏助手卸载及关闭自动更新03奈飞工厂官网，国内Netflix影视在线看|中文网页电脑版入口04KGG转MP3工具|非KGM文件|解密音频05Linux下V2Ray安装配置指南06Xget：下一代开源资源获取加速引擎，让你的文件下载、储存库克隆和镜像拉取快如闪电07蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接08Qwen3-Coder 快速上手教程 | Qwen Code + Claude Code09【2025.08.06最新版】Android Studio下载、安装及配置记录（自动下载sdk）10突破百度网盘的下载限速，两种方法教会你【超详细】