css焦点图制作

使用纯CSS制作焦点图

HTML结构采用无序列表包裹图片，通过绝对定位实现层叠效果

<div class="slider">
  <ul>
    <li><img src="image1.jpg"></li>
    <li><img src="image2.jpg"></li>
    <li><img src="image3.jpg"></li>
  </ul>
</div>

基础样式设置容器尺寸和隐藏溢出

.slider {
  width: 600px;
  height: 400px;
  overflow: hidden;
  position: relative;
}

.slider ul {
  width: 3000px; /* 图片总宽度 */
  margin: 0;
  padding: 0;
}

CSS动画实现自动轮播

通过关键帧动画控制图片位置变化

.slider li {
  width: 600px;
  height: 400px;
  float: left;
  list-style: none;
}

@keyframes slide {
  0% { margin-left: 0; }
  30% { margin-left: 0; }
  33% { margin-left: -600px; }
  63% { margin-left: -600px; }
  66% { margin-left: -1200px; }
  97% { margin-left: -1200px; }
  100% { margin-left: 0; }
}

.slider ul {
  animation: slide 10s infinite;
}

添加导航指示点

利用伪元素和label实现交互控制

.slider nav {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.slider nav label {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  margin: 0 5px;
}

响应式适配技巧

通过媒体查询调整不同屏幕尺寸下的样式

@media (max-width: 768px) {
  .slider {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
  }

  .slider li img {
    width: 100%;
    height: auto;
  }
}

悬停暂停功能

添加:hover伪类控制动画状态

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

过渡效果增强

使用transition实现平滑切换

.slider ul {
  transition: margin-left 0.5s ease-in-out;
}

这种方法无需JavaScript即可实现基本轮播功能，适合轻量级展示需求。如需更复杂的交互效果，建议结合JavaScript实现。