纯 CSS 自动轮播幻灯片的代码应该怎么写？

原创

小丹资料

发布于 2026-04-26 10:00:27

200

我给你最精简、最标准、直接复制就能跑的 纯 CSS 自动轮播完整代码，无任何 JS，带：

自动播放 + 无限循环 + 平滑过渡 + 鼠标悬停暂停。

最终可直接运行代码（复制即用）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>纯CSS自动轮播</title>
<style>
/* 基础样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 轮播外层容器 */
.banner {
  width: 800px;
  height: 400px;
  margin: 50px auto;
  overflow: hidden; /* 隐藏超出部分 */
}

/* 图片包裹层：横向排列 + 动画 */
.img-box {
  width: 400%; /* 4张图 = 400% */
  height: 100%;
  display: flex;
  
  /* 自动轮播动画：名称 时长 匀速 无限循环 */
  animation: move 16s linear infinite;
}

/* 鼠标悬停 暂停轮播 */
.banner:hover .img-box {
  animation-play-state: paused;
}

/* 单张图片 */
.img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 核心：自动滑动动画 */
@keyframes move {
  0%   { transform: translateX(0); }
  25%  { transform: translateX(-25%); }
  50%  { transform: translateX(-50%); }
  75%  { transform: translateX(-75%); }
  100% { transform: translateX(-100%); }
}
</style>
</head>
<body>

<div class="banner">
  <div class="img-box">
    <img src="https://picsum.photos/id/237/800/400" alt="">
    <img src="https://picsum.photos/id/238/800/400" alt="">
    <img src="https://picsum.photos/id/239/800/400" alt="">
    <img src="https://picsum.photos/id/240/800/400" alt="">
  </div>
</div>

</body>
</html>

你只需要改 3 个地方

1. 改图片数量

3张图 → width:300%
4张图 → width:400%
5张图 → width:500%

2. 改轮播速度

animation: move 16s linear infinite;

16s = 全程播放时间
改快：10s
改慢：20s

3. 改宽高

.banner {
  width: 800px;
  height: 400px;
}

核心原理（看懂=会写）

overflow: hidden 隐藏外面的图片
display: flex 让图片横排成一行
@keyframes 定义移动位置
animation 让它自动无限播放
animation-play-state: paused 鼠标悬停暂停

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

css3

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

css3

登录后参与评论

0 条评论

热度

纯 CSS 自动轮播幻灯片的代码应该怎么写？

纯 CSS 自动轮播幻灯片的代码应该怎么写？

最终可直接运行代码（复制即用）

你只需要改 3 个地方

1. 改图片数量

2. 改轮播速度

3. 改宽高

核心原理（看懂=会写）

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐