纯css制作轮播

纯CSS轮播实现方法

通过CSS动画和关键帧可以实现无需JavaScript的轮播效果。以下是两种常见实现方式：

横向滑动轮播

HTML结构需固定宽度容器包裹图片列表：

<div class="slider">
  <div class="slide-track">
    <div class="slide"><img src="image1.jpg"></div>
    <div class="slide"><img src="image2.jpg"></div>
    <div class="slide"><img src="image3.jpg"></div>
  </div>
</div>

CSS关键样式：

.slider {
  width: 300px;
  height: 200px;
  overflow: hidden;
  position: relative;
}

.slide-track {
  display: flex;
  width: calc(300px * 3);
  animation: scroll 10s linear infinite;
}

.slide {
  width: 300px;
}

@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-300px); }
}

淡入淡出轮播

HTML结构需要重叠的图片层：

<div class="fade-slider">
  <img class="slide" src="image1.jpg">
  <img class="slide" src="image2.jpg">
  <img class="slide" src="image3.jpg">
</div>

CSS关键样式：

.fade-slider {
  position: relative;
  width: 300px;
  height: 200px;
}

.slide {
  position: absolute;
  opacity: 0;
  animation: fade 12s infinite;
}

.slide:nth-child(1) { animation-delay: 0s; }
.slide:nth-child(2) { animation-delay: 4s; }
.slide:nth-child(3) { animation-delay: 8s; }

@keyframes fade {
  0%, 33% { opacity: 1; }
  33.3%, 100% { opacity: 0; }
}

自动播放控制技巧

通过调整animation-duration可控制轮播速度。添加暂停交互：

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

无限循环优化

对于横向轮播，复制首尾图片可避免切换时的空白间隙：

<div class="slide-track">
  <div class="slide"><img src="image3.jpg"></div> <!-- 复制末尾图片 -->
  <!-- 原始图片 -->
  <div class="slide"><img src="image1.jpg"></div>
  <div class="slide"><img src="image2.jpg"></div>
  <div class="slide"><img src="image3.jpg"></div>
  <div class="slide"><img src="image1.jpg"></div> <!-- 复制开头图片 -->
</div>

调整关键帧：

@keyframes scroll {
  0% { transform: translateX(-300px); }
  100% { transform: translateX(-900px); }
}

这些方法均依赖CSS动画特性，需注意浏览器兼容性。现代浏览器支持良好，但旧版本可能需要-webkit前缀。