CSS3幻灯片操作教程
原创
CSS3幻灯片操作教程
原创
小丹资料
发布于 2026-04-24 18:23:06
发布于 2026-04-24 18:23:06
下面给你一套从零开始、可直接复制运行的 CSS3 幻灯片教程，包含：基础版（CSS+少量JS）、纯CSS版（无JS）、自动轮播、左右按钮、导航点、响应式。
一、核心原理
CSS3 幻灯片主要靠这几个特性：
overflow: hidden：隐藏视口外的图片transition：平滑过渡（左右滑动/淡入淡出）transform: translateX()：水平位移切换@keyframes：纯CSS自动轮播:checked伪类：实现无JS点击切换
二、基础版（CSS + 少量JS，最常用）
1. HTML 结构
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 幻灯片</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="slider-container">
<div class="slider-wrapper">
<div class="slide"><img src="https://picsum.photos/id/237/1200/600" alt="图1"></div>
<div class="slide"><img src="https://picsum.photos/id/238/1200/600" alt="图2"></div>
<div class="slide"><img src="https://picsum.photos/id/239/1200/600" alt="图3"></div>
</div>
<!-- 左右按钮 -->
<button class="slider-btn prev">❮</button>
<button class="slider-btn next">❯</button>
<!-- 导航点 -->
<div class="indicators">
<span class="dot active"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
</div>
<script>
const wrapper = document.querySelector('.slider-wrapper');
const slides = document.querySelectorAll('.slide');
const prev = document.querySelector('.prev');
const next = document.querySelector('.next');
const dots = document.querySelectorAll('.dot');
let index = 0;
// 更新轮播
function updateSlider() {
wrapper.style.transform = `translateX(-${index * 100}%)`;
dots.forEach((dot, i) => dot.classList.toggle('active', i === index));
}
// 下一张
next.addEventListener('click', () => {
index = (index + 1) % slides.length;
updateSlider();
});
// 上一张
prev.addEventListener('click', () => {
index = (index - 1 + slides.length) % slides.length;
updateSlider();
});
// 点击导航点
dots.forEach((dot, i) => {
dot.addEventListener('click', () => {
index = i;
updateSlider();
});
});
// 自动轮播（可选）
setInterval(() => {
index = (index + 1) % slides.length;
updateSlider();
}, 5000);
</script>
</body>
</html>2. CSS 样式（style.css）
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
padding: 20px;
}
/* 容器：响应式，最大宽度1200px */
.slider-container {
position: relative;
width: 100%;
max-width: 1200px;
height: 60vh;
margin: 0 auto;
overflow: hidden;
border-radius: 8px;
}
/* 轮播 wrapper：水平排列 */
.slider-wrapper {
display: flex;
height: 100%;
transition: transform 0.6s ease-in-out; /* 滑动动画 */
}
/* 单张幻灯片：占满容器宽度 */
.slide {
flex: 0 0 100%;
height: 100%;
}
.slide img {
width: 100%;
height: 100%;
object-fit: cover; /* 防止图片拉伸 */
}
/* 左右按钮 */
.slider-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
background: rgba(0,0,0,0.5);
color: #fff;
border: none;
border-radius: 50%;
cursor: pointer;
font-size: 18px;
z-index: 10;
transition: background 0.3s;
}
.slider-btn:hover {
background: rgba(0,0,0,0.8);
}
.slider-btn.prev { left: 16px; }
.slider-btn.next { right: 16px; }
/* 导航点 */
.indicators {
position: absolute;
bottom: 16px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 8px;
z-index: 10;
}
.dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(255,255,255,0.5);
cursor: pointer;
transition: background 0.3s;
}
.dot.active {
background: #fff;
}
/* 响应式：小屏幕高度自适应 */
@media (max-width: 768px) {
.slider-container {
height: 40vh;
}
.slider-btn {
width: 36px;
height: 36px;
font-size: 14px;
}
}三、纯CSS版（无JavaScript，用 :checked）
1. HTML（用 radio 单选按钮控制）
<div class="css-slider">
<input type="radio" name="slide" id="s1" checked>
<input type="radio" name="slide" id="s2">
<input type="radio" name="slide" id="s3">
<div class="slides">
<div class="slide"><img src="https://picsum.photos/id/237/1200/600" alt="图1"></div>
<div class="slide"><img src="https://picsum.photos/id/238/1200/600" alt="图2"></div>
<div class="slide"><img src="https://picsum.photos/id/239/1200/600" alt="图3"></div>
</div>
<div class="nav">
<label for="s1"></label>
<label for="s2"></label>
<label for="s3"></label>
</div>
</div>2. CSS
.css-slider {
position: relative;
width: 100%;
max-width: 1200px;
height: 60vh;
margin: 0 auto;
overflow: hidden;
}
/* 隐藏单选按钮 */
input[name="slide"] {
display: none;
}
.slides {
display: flex;
height: 100%;
transition: transform 0.6s ease-in-out;
}
.slide {
flex: 0 0 100%;
height: 100%;
}
.slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* 导航点 */
.nav {
position: absolute;
bottom: 16px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 8px;
}
.nav label {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(255,255,255,0.5);
cursor: pointer;
transition: background 0.3s;
}
/* 选中态 */
#s1:checked ~ .slides { transform: translateX(0); }
#s2:checked ~ .slides { transform: translateX(-100%); }
#s3:checked ~ .slides { transform: translateX(-200%); }
#s1:checked ~ .nav label:nth-child(1) { background: #fff; }
#s2:checked ~ .nav label:nth-child(2) { background: #fff; }
#s3:checked ~ .nav label:nth-child(3) { background: #fff; }四、纯CSS自动轮播（@keyframes）
在上述纯CSS版基础上，添加动画：
.slides {
animation: autoPlay 9s infinite ease-in-out;
}
@keyframes autoPlay {
0%, 30% { transform: translateX(0); }
33%, 63% { transform: translateX(-100%); }
66%, 96% { transform: translateX(-200%); }
100% { transform: translateX(0); }
}- 每张停留 3秒，总时长 9秒，无限循环。
五、常用效果扩展
1. 淡入淡出（替换滑动动画）
.slide {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 0.6s ease;
}
#s1:checked ~ .slides .slide:nth-child(1) { opacity: 1; }
#s2:checked ~ .slides .slide:nth-child(2) { opacity: 1; }
#s3:checked ~ .slides .slide:nth-child(3) { opacity: 1; }2. 3D 翻转（需 perspective）
.slider-container {
perspective: 1000px;
}
.slide {
transform: rotateY(180deg);
backface-visibility: hidden;
transition: transform 0.6s;
}
#s1:checked ~ .slides .slide:nth-child(1) { transform: rotateY(0); }
/* 同理其他slide */六、浏览器兼容
- 现代浏览器（Chrome、Firefox、Edge）完全支持
- IE11：仅支持基础过渡，不支持
@keyframes与transform高级用法 - 移动端：完美兼容
七、使用建议
- 快速开发/需复杂交互 → 用 CSS+JS 基础版
- 追求极简、无JS → 用 纯CSS :checked 版
- 自动轮播展示 → 加 @keyframes 动画
需要我把以上代码整合成一个可直接保存运行的 HTML 文件吗？
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号