html无js轮播图

### 使用纯HTML和CSS创建轮播图

通过巧妙利用`<input>`标签与`:checked`伪类，可以构建无需JavaScript支持的交互式轮播图。核心思路在于借助隐藏型单选按钮来控制不同图片之间的切换。

#### HTML结构设计
定义一组互斥的选择器用于指示当前展示哪张幻灯片：

<div class="carousel">
  <!-- 控制导航 -->
  <label for="slide-dot-1"></label>
  <label for="slide-dot-2"></label>
  <label for="slide-dot-3"></label>

  <!-- 幻灯片容器 -->
  <div class="slides">
    <input type="radio" name="slider" id="slide-dot-1" checked />
    <section><img src="./image1.jpg"/></section>

    <input type="radio" name="slider" id="slide-dot-2"/>
    <section><img src="./image2.jpg"/></section>

    <input type="radio" name="slider" id="slide-dot-3"/>
    <section><img src="./image3.jpg"/></section>
  </div>
</div>

#### CSS样式设置
应用绝对定位使各层重叠，并依据选择状态调整可见度；同时配置动画过渡效果提升用户体验[^1]。

.carousel {
  position: relative;
}

.slides input[type='radio'] {
  display:none; /* 隐藏实际输入框 */
}

.slides section {
  opacity:0;
  transition:.5s ease-in-out;
  position:absolute;
  top:0;left:0;width:100%;height:100%;
}

/* 当对应的radio被选中时显示该节 */
#slide-dot-1:checked ~ .slides section:nth-child(2),
#slide-dot-2:checked ~ .slides section:nth-child(4),
#slide-dot-3:checked ~ .slides section:nth-child(6){
  opacity:1;
}

此方法不仅实现了基本的轮播功能，还保持了良好的可访问性和SEO友好性。由于完全基于标准Web技术栈，因此具有广泛的浏览器兼容性[^1]。