css制作轮播

CSS制作轮播的方法

纯CSS轮播（无JavaScript）

使用CSS动画和关键帧（@keyframes）实现简单的轮播效果。适合静态内容展示，无需交互控制。

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

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

.slide {
  width: 100%;
  height: 100%;
  position: absolute;
  animation: slide 9s infinite;
  opacity: 0;
}

.slide:nth-child(1) { animation-delay: 0s; background: #f00; }
.slide:nth-child(2) { animation-delay: 3s; background: #0f0; }
.slide:nth-child(3) { animation-delay: 6s; background: #00f; }

@keyframes slide {
  0% { opacity: 0; }
  10% { opacity: 1; }
  33% { opacity: 1; }
  43% { opacity: 0; }
  100% { opacity: 0; }
}

使用CSS Grid实现轮播

通过CSS Grid布局和scroll-snap属性实现平滑滚动轮播效果。

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

.carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}

.item {
  scroll-snap-align: start;
  height: 200px;
}

响应式轮播设计

结合媒体查询和Flexbox实现适应不同屏幕尺寸的轮播。

.slider-container {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
}

@media (min-width: 768px) {
  .slide { flex: 0 0 50%; }
}

轮播指示器（纯CSS）

通过伪元素和:target选择器实现导航指示器。

<div class="slider">
  <div id="slide1" class="slide">Slide 1</div>
  <div id="slide2" class="slide">Slide 2</div>
</div>
<div class="indicators">
  <a href="#slide1">1</a>
  <a href="#slide2">2</a>
</div>

.slide {
  display: none;
}

.slide:target {
  display: block;
}

自动轮播与暂停

利用:hover伪类实现鼠标悬停时暂停轮播。

.slider {
  animation: scroll 10s linear infinite;
}

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

注意：纯CSS轮播功能有限，如需复杂交互（如触摸滑动、动态加载内容），建议结合JavaScript实现。现代浏览器支持的scroll-snap属性可显著提升滚动轮播的体验。