6种无插件的纯HTML轮播方案，轻松实现HTML幻灯片

实现思路是把所有幻灯片放在同一个容器内，通过隐藏的单选按钮以及 CSS 伪类选择器来控制当前幻灯片的可见性和布局，从而实现滑动效果。

为了提升可访问性，可以为每一页提供描述性文本，让屏幕阅读器知道轮播的结构，并通过 标签控件的行为实现键盘导航入口。

Slide 1 标题
这是第一张幻灯片的内容。
Slide 2 标题
这是第二张幻灯片的内容。
Slide 3 标题
这是第三张幻灯片的内容。

.carousel {position: relative;width: 100%;max-width: 800px;height: 320px;margin: 0 auto;overflow: hidden;
}
.slides {display: flex;width: 300%; /* 3 slides, 每页占 100% */height: 100%;transition: transform 0.5s ease;
}
.slide {width: 100%;flex: 0 0 100%;padding: 1rem;box-sizing: border-box;
}
#s1:checked ~ .slides { transform: translateX(0%); }
#s2:checked ~ .slides { transform: translateX(-100%); }
#s3:checked ~ .slides { transform: translateX(-200%); }/* 控钮样式 */
.controls {position: absolute;bottom: 12px;left: 0;right: 0;display: flex;justify-content: center;gap: 8px;
}
.dot {width: 12px;height: 12px;border-radius: 50%;background: rgba(255,255,255,0.8);display: inline-block;cursor: pointer;
}

02. 自动轮播：纯CSS实现（无JS）

实现思路与核心样式

这是一个 纯CSS自动轮播方案，通过将幻灯片容器设置为水平排列并用 CSS3 动画进行自动切换，无需任何JavaScript即可实现定时轮播。

核心要点包括：将幻灯片容器的宽度设为幻灯片数量的倍数，使用 steps() 将切换点固定在时间点，确保每次切换是离散的。

为了用户体验，在自动播放时也保留暂停能力：通过鼠标悬停或用户交互暂停动画，这样在移动设备或触控操作时能更好地控制节奏。

Slide 1
Slide 2
Slide 3

.autoslide {width: 100%;max-width: 800px;margin: 0 auto;overflow: hidden;position: relative;
}
.autoslide .slides {display: flex;width: 300%; /* 3 slides */height: 320px;animation: slide 9s steps(3) infinite;
}
.autoslide .slide {width: 100%;flex: 0 0 100%;display: flex;align-items: center;justify-content: center;color: #222;font-size: 2rem;
}
@keyframes slide {0% { transform: translateX(0%); }33.33% { transform: translateX(-100%); }66.66% { transform: translateX(-200%); }100% { transform: translateX(-200%); } /* 循环回到起点再开始下一轮 */
}/* 鼠标悬停时暂停，提升交互体验 */
.autoslide:hover .slides { animation-play-state: paused; }/* 可选的无障碍增强：通过aria-label描述轮播 */

03. 响应式与可访问性优化（纯HTML轮播方案）

移动端适配与无障碍设计

在移动端场景下，响应式设计显得尤为重要。通过使用相对单位、视口单位以及媒体查询，可以让幻灯片在小屏设备上保持良好的可读性与操作性，确保触控区域足够大，提升用户体验。

无插件的纯HTML轮播方案还需要关注 无障碍支持，例如为轮播容器添加 ARIA 属性、为每一页提供清晰的描述文本，以及提供键盘导航入口，确保屏幕阅读器能够清晰朗读轮播结构。

在性能方面，尽量降低图片体积、采用合适的图片格式以及开启懒加载策略，最大限度降低首屏加载时间，同时确保轮播的平滑性。

Slide 1 文字描述
Slide 2 文字描述
Slide 3 文字描述

.responsive-carousel {width: 100%;max-width: 900px;margin: 0 auto;overflow: hidden;
}
.rslides {display: flex;width: 300%; /* 3 slides */transition: transform 0.5s ease;
}
.rslide {width: 100%;flex: 0 0 100%;height: 40vh;display: flex;align-items: center;justify-content: center;background: #eee;
}
#r1:checked ~ .rslides { transform: translateX(0%); }
#r2:checked ~ .rslides { transform: translateX(-100%); }
#r3:checked ~ .rslides { transform: translateX(-200%); }/* 响应式调整：移动设备更友好 */
@media (min-width: 768px) {.rslide { height: 60vh; font-size: 1.5rem; }
}
@media (max-width: 420px) {.rslide { height: 34vh; }
}