css如何制作轮播

CSS 轮播制作方法

使用纯 CSS 制作轮播可以通过动画和关键帧实现，以下是具体实现步骤：

HTML 结构

<div class="carousel">
  <div class="carousel-inner">
    <div class="carousel-item">Slide 1</div>
    <div class="carousel-item">Slide 2</div>
    <div class="carousel-item">Slide 3</div>
  </div>
</div>

CSS 样式

.carousel {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.carousel-inner {
  display: flex;
  width: 300%; /* 3 slides */
  animation: slide 10s infinite;
}

.carousel-item {
  width: 33.33%;
  padding: 20px;
  box-sizing: border-box;
}

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

添加导航指示器

可以通过伪元素或额外元素添加导航点：

.carousel::after {
  content: "";
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}

.carousel::after {
  content: "•••";
  letter-spacing: 5px;
  animation: dot 10s infinite;
}

@keyframes dot {
  0%, 33% { opacity: 1; }
  34%, 100% { opacity: 0.5; }
}

响应式调整

针对不同屏幕尺寸调整轮播样式：

@media (max-width: 768px) {
  .carousel-inner {
    width: 500%; /* 调整幻灯片数量 */
  }
  .carousel-item {
    width: 20%;
  }
  @keyframes slide {
    /* 更新关键帧百分比 */
  }
}

暂停动画交互

添加悬停暂停功能：

.carousel:hover .carousel-inner {
  animation-play-state: paused;
}

自动无限循环

确保动画无缝衔接：

.carousel-inner {
  animation: slide 10s infinite linear;
}

这种方法无需 JavaScript，适合简单展示需求。如需更复杂交互（如手动导航），建议结合 JavaScript 实现。