css轮转图制作

基础轮播图结构

HTML部分需创建一个包含图片列表的容器，通常使用div嵌套ul/li或直接多个img标签：

<div class="slider">
  <div class="slides">
    <img src="image1.jpg" alt="Slide 1">
    <img src="image2.jpg" alt="Slide 2">
    <img src="image3.jpg" alt="Slide 3">
  </div>
</div>

核心CSS样式

通过overflow: hidden隐藏溢出内容，并设置相对定位：

.slider {
  width: 600px;
  height: 400px;
  overflow: hidden;
  position: relative;
}
.slides {
  display: flex;
  transition: transform 0.5s ease;
}
.slides img {
  width: 100%;
  flex-shrink: 0;
}

自动轮播实现

使用CSS动画控制平移效果，通过@keyframes实现无限循环：

.slides {
  animation: slide 10s infinite;
}
@keyframes slide {
  0%, 20% { transform: translateX(0); }
  25%, 45% { transform: translateX(-100%); }
  50%, 70% { transform: translateX(-200%); }
  75%, 95% { transform: translateX(-300%); }
  100% { transform: translateX(-400%); }
}

响应式适配

通过媒体查询调整不同屏幕尺寸下的轮播图尺寸：

@media (max-width: 768px) {
  .slider {
    width: 100%;
    height: 300px;
  }
}

导航按钮样式

添加自定义的前进/后退按钮增强交互性：

.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
}
.next { right: 0; }
.prev { left: 0; }

指示器设计

在底部添加当前幻灯片位置指示器：

.dots {
  text-align: center;
  position: absolute;
  bottom: 20px;
  width: 100%;
}
.dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin: 0 4px;
  border-radius: 50%;
  background-color: rgba(255,255,255,0.5);
  cursor: pointer;
}
.dot.active {
  background-color: white;
}