不用js的html轮播图

在HTML中创建轮播图并不一定要依赖JavaScript，你可以使用纯CSS和HTML结合一些简单的动画效果来实现。这种方法通常称为CSS-only轮播或者无脚本轮播。下面是一个基本的示例：

<div class="carousel">
  <div class="slide active">Slide 1</div>
  <div class="slide">Slide 2</div>
  <div class="slide">Slide 3</div>
</div>

<style>
.carousel {
  width: 100%;
  overflow: hidden;
}

.slide {
  position: absolute;
  width: 100%;
  height: 100vh;
  transition: transform 1s ease;
}

.slide.active {
  transform: translateX(0);
}

.carousel:hover .slide {
  transform: translateX(-100%);
}
</style>

在这个例子中，我们有一个包含多个`.slide`的容器，通过设置`.active`类使当前显示的幻灯片位于左边，当鼠标悬停时，所有幻灯片向左移动，下一张就显示出来了。

然而，如果你需要更复杂的交互或动画效果，比如自动切换、触屏滑动等，则可能需要借助CSS3的@keyframes动画或者轻量级的JavaScript库，如Slick.js或Swiper.js等。