用css实现一个轮播图

以下是一个基本的CSS轮播图示例：

HTML代码：

<div class="slideshow-container">
  <div class="slideshow-image active"><img src="image1.jpg"></div>
  <div class="slideshow-image"><img src="image2.jpg"></div>
  <div class="slideshow-image"><img src="image3.jpg"></div>
  <div class="slideshow-image"><img src="image4.jpg"></div>
</div>

CSS代码：

.slideshow-container {
  width: 100%;
  height: 500px;
  overflow: hidden;
  position: relative;
}

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

.slideshow-image.active {
  opacity: 1;
}

/* 自动播放 */
@keyframes slideshow {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  25% {
    opacity: 1;
  }
  45% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

.slideshow-image:nth-child(1) {
  animation: slideshow 5s infinite;
}

.slideshow-image:nth-child(2) {
  animation: slideshow 5s infinite;
  animation-delay: 1s;
}

.slideshow-image:nth-child(3) {
  animation: slideshow 5s infinite;
  animation-delay: 2s;
}

.slideshow-image:nth-child(4) {
  animation: slideshow 5s infinite;
  animation-delay: 3s;
}

解释：

• slideshow-container 容器设置为相对定位，设置宽度和高度，并设置 overflow:hidden 隐藏超出容器的内容。
• .slideshow-image 的位置设置为绝对，并设置宽度和高度为100%。透明度为0，使用 transition 属性设置过渡效果，当 active 类被添加时，透明度变为1，图片显示在轮播图中。
• @keyframes 定义了轮播图的动画，轮播图中的每个图片都需要使用动画，动画的循环次数使用 infinite 定义。在 slideshow-image 的每个元素中添加动画和 animation-delay 属性，让它们按顺序播放。
• slideshow 动画定义了每个图片的动画效果，前25%的时间是第一张图片的动画，接下来的25%时间是第二张图片的动画，以此类推，总计5秒的动画循环时间。

该示例仅仅是一个基本的CSS轮播图，可以通过添加其他CSS样式和JavaScript代码来增强交互性和视觉效果。