使用div实现只使用css轮播图

可以使用 CSS3 中的动画和过渡来实现只使用 CSS 的轮播图。以下是一个简单的示例：

HTML:

<div class="slider">
  <img src="image1.jpg" alt="">
  <img src="image2.jpg" alt="">
  <img src="image3.jpg" alt="">
  <img src="image4.jpg" alt="">
</div>

CSS:

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

.slider img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.slider img:first-child {
  opacity: 1;
}

.slider img.active {
  opacity: 1;
}

@keyframes slide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

.slider img:not(:first-child) {
  animation: slide 5s ease-in-out infinite;
}

这个示例中，使用了 `overflow: hidden` 来隐藏超出 `slider` 容器范围的图片，使用 `position: absolute` 将所有图片叠在一起，然后使用 `opacity` 来控制图片的显示和隐藏。使用 `transition` 属性来实现图片的淡入淡出效果。

使用 `@keyframes` 规则创建一个名为 `slide` 的动画，使图片从左向右滑动。最后，用 `animation` 属性将除第一张图片以外的所有图片应用动画。