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

原创

小丹资料

发布于 2026-04-25 16:38:44

230

我给你最标准、最简洁、直接复制就能运行的 纯 CSS 自动轮播幻灯片完整代码，包含：

自动播放 + 平滑滑动 + 无限循环 + 响应式 + 鼠标悬停暂停。

完整代码（直接用）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>纯CSS自动轮播</title>
<style>
  /* 基础重置 */
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  /* ========== 轮播容器 ========== */
  .slider {
    width: 100%;
    max-width: 900px; /* 最大宽度 */
    height: 450px;    /* 高度 */
    margin: 30px auto;
    overflow: hidden; /* 核心：隐藏外面的图片 */
    border-radius: 8px;
    position: relative;
  }

  /* ========== 图片包裹层 ========== */
  .slides {
    width: 400%; /* 4张图 = 400%，几张图就写几百% */
    height: 100%;
    display: flex; /* 让图片横排 */
    
    /* 核心：自动轮播动画 */
    animation: autoSlide 16s infinite linear;
  }

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

  /* ========== 单张图片 ========== */
  .slide {
    width: 100%;
    height: 100%;
  }
  .slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 图片不变形 */
  }

  /* ========== 自动轮播关键帧 ========== */
  @keyframes autoSlide {
    0%   { transform: translateX(0); }      /* 第1张 */
    23%  { transform: translateX(0); }      /* 停留 */
    
    25%  { transform: translateX(-100%); }  /* 第2张 */
    48%  { transform: translateX(-100%); }  /* 停留 */
    
    50%  { transform: translateX(-200%); }  /* 第3张 */
    73%  { transform: translateX(-200%); }  /* 停留 */
    
    75%  { transform: translateX(-300%); }  /* 第4张 */
    98%  { transform: translateX(-300%); }  /* 停留 */
    100% { transform: translateX(0); }      /* 回到第1张 */
  }
</style>
</head>
<body>

  <!-- 轮播结构 -->
  <div class="slider">
    <div class="slides">
      <div class="slide">
        <img src="https://picsum.photos/id/237/900/450" alt="图1">
      </div>
      <div class="slide">
        <img src="https://picsum.photos/id/238/900/450" alt="图2">
      </div>
      <div class="slide">
        <img src="https://picsum.photos/id/239/900/450" alt="图3">
      </div>
      <div class="slide">
        <img src="https://picsum.photos/id/240/900/450" alt="图4">
      </div>
    </div>
  </div>

</body>
</html>

你只需要改这 3 个地方就能自定义

1. 改图片数量

3张图 → .slides { width: 300%; }
4张图 → width:400%
5张图 → width:500%

2. 改轮播速度

animation: autoSlide 16s infinite linear;

16s = 总时长
改快：10s
改慢：20s

3. 改尺寸

.slider {
  max-width: 900px;
  height: 450px;
}

核心原理（看懂就会自己写）

.slider
- 固定宽高
- overflow:hidden 隐藏外面的图片
.slides
- display:flex 让图片横排成一排
- 宽度 = 100% × 图片数量
- animation 让它自动左右移动
@keyframes
- 用 transform:translateX() 控制滑动位置
- 百分比控制停留时间

这个纯CSS轮播自带功能

✅ 自动无限轮播

✅ 平滑滑动过渡

✅ 响应式适配手机

✅ 图片不变形

✅ 鼠标悬停暂停

✅ 无 JS、零报错

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

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

css3

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

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

css3

登录后参与评论

0 条评论

热度

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

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

完整代码（直接用）

你只需要改这 3 个地方就能自定义

1. 改图片数量

2. 改轮播速度

3. 改尺寸

核心原理（看懂就会自己写）

这个纯CSS轮播自带功能

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐