制作css轮播图

CSS轮播图制作方法

纯CSS实现基础轮播

使用CSS动画和关键帧实现自动轮播效果。HTML结构需包含一个容器和多个轮播项。

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

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

.carousel-item {
  width: 100%;
  height: 100%;
  position: absolute;
  animation: rotate 9s infinite;
  opacity: 0;
}

.carousel-item:nth-child(1) { animation-delay: 0s; }
.carousel-item:nth-child(2) { animation-delay: 3s; }
.carousel-item:nth-child(3) { animation-delay: 6s; }

@keyframes rotate {
  0%, 33% { opacity: 1; }
  33.33%, 100% { opacity: 0; }
}

交互式轮播实现

通过复选框或单选框实现用户控制的轮播效果。需为每个轮播项添加对应的输入控件。

<div class="carousel">
  <input type="radio" name="slides" id="slide1" checked>
  <input type="radio" name="slides" id="slide2">
  <input type="radio" name="slides" id="slide3">

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

  <div class="controls">
    <label for="slide1"></label>
    <label for="slide2"></label>
    <label for="slide3"></label>
  </div>
</div>

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

.slides {
  display: flex;
  width: 300%;
  transition: transform 0.5s;
}

#slide1:checked ~ .slides { transform: translateX(0); }
#slide2:checked ~ .slides { transform: translateX(-33.33%); }
#slide3:checked ~ .slides { transform: translateX(-66.66%); }

响应式设计适配

使用视窗单位和媒体查询确保轮播在不同设备上正常显示。

.carousel {
  width: 90vw;
  max-width: 600px;
  height: 56.25vw;
  max-height: 400px;
}

@media (min-width: 768px) {
  .carousel {
    height: 50vh;
  }
}

性能优化技巧

避免使用可能引起重排的属性，优化动画性能。

.carousel-item {
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

@keyframes rotate {
  0%, 33% { 
    opacity: 1;
    transform: translateZ(0);
  }
  33.33%, 100% { 
    opacity: 0;
    transform: translateZ(-100px);
  }
}

无障碍访问增强

添加ARIA属性和键盘导航支持，提升可访问性。

<div class="carousel" role="region" aria-label="Image carousel">
  <div class="carousel-item" aria-hidden="false">...</div>
</div>

.carousel-item:focus {
  outline: 2px solid #0066cc;
}