css制作轮播

CSS 制作轮播

使用纯 CSS 制作轮播可以通过 @keyframes 动画和 animation 属性实现，无需 JavaScript。以下是一个简单的实现方法：

基本 HTML 结构

<div class="slider">
  <div class="slides">
    <div class="slide">Slide 1</div>
    <div class="slide">Slide 2</div>
    <div class="slide">Slide 3</div>
  </div>
</div>

CSS 动画实现

.slider {
  width: 100%;
  overflow: hidden;
}

.slides {
  display: flex;
  width: 300%; /* 3 张幻灯片，每张占 100% */
  animation: slide 10s infinite;
}

.slide {
  width: 33.33%; /* 每张幻灯片宽度 */
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f0f0;
  border: 1px solid #ccc;
}

@keyframes slide {
  0% { transform: translateX(0); }
  33% { transform: translateX(-33.33%); }
  66% { transform: translateX(-66.66%); }
  100% { transform: translateX(0); }
}

优化与注意事项

• 动画时间调整：修改 animation: slide 10s infinite; 中的 10s 可控制轮播速度。
• 幻灯片数量：如需增加幻灯片，调整 .slides 的宽度和 @keyframes 中的百分比。
• 无缝轮播：通过复制首张幻灯片到末尾，可实现无缝效果（需调整 HTML 和 CSS）。

响应式设计

添加媒体查询以适应不同屏幕尺寸：

@media (max-width: 768px) {
  .slide {
    height: 200px;
  }
}

交互控制（可选）

通过 :hover 暂停动画：

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

此方法适合简单场景，如需复杂功能（如按钮控制、指示器），建议结合 JavaScript 实现。