实现了一个简单的图片全屏轮播功能，包含标题、图片和指示点。
大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信回复源码两字，我会发送完整的压缩包给你。
演示效果
HTML&CSS
html
复制代码
Title
alt="Photo of Paul Cuoco from Unsplash" id="slide" />
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：当前显示的图片索引。
各位互联网搭子，要是这篇文章成功引起了你的注意，别犹豫，关注、点赞、评论、分享走一波，让我们把这份默契延续下去，一起在知识的海洋里乘风破浪！