css3制作轮播图

CSS3 制作轮播图的方法

使用纯 CSS3 动画

通过 @keyframes 和 animation 属性实现自动轮播效果。
HTML 结构需将图片包裹在容器中，并设置固定宽度和隐藏溢出。

<div class="slider">
  <div class="slides">
    <img src="image1.jpg">
    <img src="image2.jpg">
    <img src="image3.jpg">
  </div>
</div>

CSS 关键代码：

.slider {
  width: 500px;
  overflow: hidden;
}
.slides {
  display: flex;
  animation: slide 10s infinite;
}
@keyframes slide {
  0% { transform: translateX(0); }
  33% { transform: translateX(-500px); }
  66% { transform: translateX(-1000px); }
  100% { transform: translateX(0); }
}

结合伪类实现交互

通过 :hover 暂停动画增强用户体验：

.slides:hover {
  animation-play-state: paused;
}

响应式适配

使用 calc() 动态计算宽度，适应不同屏幕尺寸：

.slider {
  width: 100%;
  max-width: 800px;
}
.slides img {
  width: calc(100% / 3);
}

指示器实现

通过伪元素和计数器添加分页标记：

.slider {
  counter-reset: slide;
}
.slides img::after {
  content: counter(slide);
  counter-increment: slide;
  position: absolute;
  bottom: 10px;
}

注意事项

• 图片数量变化时需调整 @keyframes 中的百分比和位移值
• 考虑添加 will-change: transform 优化动画性能
• 移动端需增加 touch-action 属性防止手势冲突

以上方法无需 JavaScript，适合简单场景。如需复杂交互（如手动滑动），建议结合 JavaScript 实现。