html不使用js的图片轮播

在不使用 JavaScript 的情况下，你可以使用 HTML 和 CSS 来创建一个基本的图片轮播。下面是一个简单的例子：

HTML 代码：

<div class="slider">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</div>

CSS 代码：

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

.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% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  95% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.slider img:nth-child(2) {
  animation-delay: 4s;
}

.slider img:nth-child(3) {
  animation-delay: 8s;
}

.slider img.active {
  animation-name: slide;
  animation-duration: 12s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

这个代码会自动轮播图片，每个图片会显示 4 秒钟，然后淡出，下一张图片淡入。你可以通过修改 CSS 代码中的动画来调整轮播速度和效果。