html轮播图思路不用js

HTML轮播图通常不依赖JavaScript，你可以通过CSS和纯静态HTML实现基本的图片轮播效果。这里是一个简单的思路：

1. **设置容器样式**：创建一个`<div>`作为轮播图的容器，设置宽度、高度和初始状态（如第一张图片显示出来）。

<div class="carousel-container">
  <img src="image1.jpg" class="active-slide" />
  <img src="image2.jpg" class="slide" />
  <!-- 更多图片 -->
</div>

2. **添加伪元素和关键的CSS**：利用`:nth-child(n)`选择器和绝对定位来控制切换动画。为每一张图片定义一个绝对定位的兄弟元素，并给它们设定透明度和位置属性。

.carousel-container {
  position: relative;
}

.slide {
  position: absolute;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.active-slide {
  position: static;
}

3. **CSS触发切换**：当鼠标移动到下一张或上一张图片的位置时，改变`.slide`元素的`position`和`.active-slide`的`opacity`，这样看起来就像轮播了。

.carousel-container:hover .slide:nth-child(2) {
  top: 0;
  opacity: 1;
  z-index: 1;
}

.carousel-container:hover .slide:nth-child(1) {
  opacity: 0;
  z-index: 0;
}

.carousel-container:hover .active-slide {
  top: auto;
}

4. **可选的改进**：为了平滑滚动，可以考虑使用CSS Scroll Snap Points或一些自定义滚动事件来更精细地控制滚动行为。

这个方法只实现了基础轮播效果，如果需要复杂功能（比如自动轮播、触屏滑动等），可能还是需要配合少量的JavaScript代码。不过对于简单的展示场景，这样的做法足够了。