css制作滑动切换

使用CSS制作滑动切换效果

通过CSS的transform和transition属性可以实现平滑的滑动切换效果。以下是一个简单的水平滑动切换示例：

<div class="slider-container">
  <div class="slider">
    <div class="slide">内容1</div>
    <div class="slide">内容2</div>
    <div class="slide">内容3</div>
  </div>
</div>

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

.slider {
  display: flex;
  transition: transform 0.5s ease;
  width: 900px; /* 3张幻灯片的总宽度 */
}

.slide {
  width: 300px;
  height: 200px;
  flex-shrink: 0;
}

使用CSS动画实现自动滑动

通过@keyframes可以创建自动滑动的动画效果：

.slider {
  animation: slide 10s infinite;
}

@keyframes slide {
  0% { transform: translateX(0); }
  33% { transform: translateX(-300px); }
  66% { transform: translateX(-600px); }
  100% { transform: translateX(0); }
}

垂直滑动效果实现

修改CSS属性可以实现垂直滑动：

.slider-container {
  height: 200px;
}

.slider {
  flex-direction: column;
  height: 600px; /* 3张幻灯片的总高度 */
  width: 300px;
}

.slide {
  height: 200px;
  width: 300px;
}

@keyframes verticalSlide {
  0% { transform: translateY(0); }
  33% { transform: translateY(-200px); }
  66% { transform: translateY(-400px); }
  100% { transform: translateY(0); }
}

添加滑动指示器

可以通过伪元素或额外HTML元素创建滑动指示器：

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

.slider-container::after {
  content: "○○○";
  letter-spacing: 5px;
}

响应式滑动切换

使用媒体查询确保在不同设备上都能正常显示：

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

  .slide {
    width: 100%;
  }
}