css焦点图制作

CSS焦点图制作方法

使用纯CSS实现焦点图（轮播图）无需JavaScript，通过CSS动画和关键帧控制图片切换。以下是具体实现步骤：

HTML结构

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

CSS样式

.slider {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.slides {
  display: flex;
  width: 300%; /* 根据图片数量调整 */
  animation: slide 10s infinite;
}

.slide {
  width: 33.33%; /* 100% / 图片数量 */
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2em;
  color: white;
}

.slide:nth-child(1) { background: #ff5252; }
.slide:nth-child(2) { background: #4caf50; }
.slide:nth-child(3) { background: #2196f3; }

@keyframes slide {
  0%, 20% { transform: translateX(0); }
  30%, 50% { transform: translateX(-33.33%); }
  60%, 80% { transform: translateX(-66.66%); }
  90%, 100% { transform: translateX(0); }
}

添加导航指示点

为焦点图添加可视化的导航指示点：

<div class="dots">
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
</div>

.dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  margin: 0 5px;
  animation: dot 10s infinite;
}

.dot:nth-child(1) { animation-delay: 0s; }
.dot:nth-child(2) { animation-delay: 3.33s; }
.dot:nth-child(3) { animation-delay: 6.66s; }

@keyframes dot {
  0%, 20% { background: white; }
  21%, 100% { background: rgba(255,255,255,0.5); }
}

响应式调整

确保焦点图在不同设备上正常显示：

@media (max-width: 768px) {
  .slide {
    height: 200px;
    font-size: 1.5em;
  }

  .dots {
    bottom: 10px;
  }
}

注意事项

• 动画时间通过animation-duration控制，示例中设置为10秒循环
• 图片数量变化时需要调整.slides的宽度和@keyframes中的百分比
• 使用overflow: hidden隐藏超出容器的内容
• 添加transition属性可实现平滑的滑动效果

这种方法适用于简单的自动轮播场景，如需手动控制仍需配合JavaScript实现。