css 自动轮播的幻灯片如何实现？

原创

小丹资料

发布于 2026-04-24 18:27:20

680

我给你最简单、最稳定、直接复制就能用的 CSS3 自动轮播幻灯片 实现方法，分 2 种最常用方案：

方案1：纯 CSS 自动轮播（无 JS，最简单）

完全靠 CSS3 @keyframes 自动播放，不用写一行 JavaScript。

完整代码（直接运行）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>纯CSS自动轮播</title>
<style>
/* 轮播容器 */
.slider {
  width: 100%;
  max-width: 800px;
  height: 400px;
  margin: 0 auto;
  overflow: hidden; /* 隐藏外面的图片 */
  position: relative;
}

/* 图片包裹层：开启动画 */
.slides {
  width: 300%; /* 3张图就是300% */
  height: 100%;
  display: flex;
  
  /* 核心：自动轮播动画 */
  animation: slide 9s infinite linear;
}

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

/* 动画关键帧：自动滑动 */
@keyframes slide {
  0%  { transform: translateX(0); }      /* 第1张 */
  33% { transform: translateX(0); }      /* 停留 */
  
  34% { transform: translateX(-100%); }  /* 切第2张 */
  66% { transform: translateX(-100%); } /* 停留 */
  
  67% { transform: translateX(-200%); } /* 切第3张 */
  99% { transform: translateX(-200%); } /* 停留 */
  100%{ transform: translateX(0); }      /* 回到第1张 */
}
</style>
</head>
<body>

<div class="slider">
  <div class="slides">
    <div class="slide"><img src="https://picsum.photos/id/237/800/400"></div>
    <div class="slide"><img src="https://picsum.photos/id/238/800/400"></div>
    <div class="slide"><img src="https://picsum.photos/id/239/800/400"></div>
  </div>
</div>

</body>
</html>

核心原理（必看）

overflow: hidden 隐藏容器外的图片
display: flex 让图片排成一横排
@keyframes 定义滑动位置
animation: slide 9s infinite 让动画无限自动播放

方案2：CSS + JS 自动轮播（最常用、最灵活）

能暂停、自动播放、无缝切换，企业项目都用这个。

完整代码（直接运行）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS+CSS自动轮播</title>
<style>
.slider {
  width: 100%;
  max-width: 800px;
  height: 400px;
  margin: 20px auto;
  overflow: hidden;
  position: relative;
}
.slides {
  height: 100%;
  display: flex;
  transition: 0.6s; /* 滑动平滑 */
}
.slide {
  width: 100%;
  height: 100%;
}
.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>
</head>
<body>

<div class="slider">
  <div class="slides">
    <div class="slide"><img src="https://picsum.photos/id/237/800/400"></div>
    <div class="slide"><img src="https://picsum.photos/id/238/800/400"></div>
    <div class="slide"><img src="https://picsum.photos/id/239/800/400"></div>
  </div>
</div>

<script>
const slides = document.querySelector('.slides');
let index = 0;

// 自动轮播函数
function autoPlay() {
  index++;
  // 切换到下一张
  slides.style.transform = `translateX(-${index * 100}%)`;

  // 到最后一张，跳回第一张
  if (index >= 3) {
    setTimeout(() => {
      slides.style.transition = 'none'; // 关闭动画
      index = 0;
      slides.style.transform = `translateX(0)`;
      
      // 重新开启动画
      setTimeout(() => slides.style.transition = '0.6s', 20)
    }, 600);
  }
}

// 每 3 秒切换一次
setInterval(autoPlay, 3000);
</script>

</body>
</html>

你可以直接修改的参数

自动播放速度
- 纯CSS：修改 9s（总时长）
- JS版：修改 3000（3000毫秒=3秒）
图片数量
- 加图片 → 宽度改成 400%
- 关键帧按比例增加即可
滑动快慢
- 修改 transition: 0.6s

最简单总结（你记住这3点就能做）

容器隐藏超出部分：overflow: hidden
图片横排：display: flex
自动动起来：
- 纯CSS → @keyframes + animation
- JS版 → setInterval 定时切换

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

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

css3

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

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

css3

登录后参与评论

0 条评论

热度

css 自动轮播的幻灯片如何实现？

css 自动轮播的幻灯片如何实现？

方案1：纯 CSS 自动轮播（无 JS，最简单）

完整代码（直接运行）

核心原理（必看）

方案2：CSS + JS 自动轮播（最常用、最灵活）

完整代码（直接运行）

你可以直接修改的参数

最简单总结（你记住这3点就能做）

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐