如何不使用JavaScript仅通过HTML实现图片切换功能？

不用JavaScript也能实现点击按钮切换图片，下面提供两种适合静态站点的方案：

方法一：利用:target伪类+锚点链接 #

通过URL锚点触发图片切换，每个图片对应唯一锚点，点击按钮跳转锚点后，CSS通过:target控制对应图片显示。

<style>
/* 默认隐藏所有图片容器，仅显示初始的pic02 */
.slider-img-container {
  display: none;
}
.slider-img-container#pic02 {
  display: block;
}
/* 匹配当前锚点的容器显示，其余隐藏 */
.slider-img-container:target {
  display: block;
}
.slider-img-container:target ~ .slider-img-container {
  display: none;
}
/* 按钮基础样式，可按需修改 */
.slider-btn {
  cursor: pointer;
  padding: 8px 16px;
  background: #eee;
  display: inline-block;
  margin: 0 10px;
}
</style>

<div class="slider-container">
  <!-- 每个图片对应带唯一ID的容器 -->
  <div id="pic01" class="slider-img-container">
    <img src="images/pic01.jpg" alt="" data-position="center center" />
  </div>
  <div id="pic02" class="slider-img-container">
    <img src="images/pic02.jpg" alt="" data-position="center center" />
  </div>
  <div id="pic03" class="slider-img-container">
    <img src="images/pic03.jpg" alt="" data-position="center center" />
  </div>

  <!-- 切换按钮，通过锚点链接跳转 -->
  <a href="#pic01" class="slider-button-prev slider-btn"> &gt; </a>
  <a href="#pic03" class="slider-button-next slider-btn"> &lt; </a>
</div>

说明：点击按钮后URL会带上锚点（比如#pic01），但不影响功能，刷新页面会停留在当前显示的图片。

方法二：利用隐藏radio按钮+:checked伪类 #

用隐藏的单选框作为状态开关，按钮通过<label>关联单选框，点击按钮触发单选框选中状态，CSS通过:checked控制对应图片显示。

<style>
/* 隐藏单选框 */
.slider-radio {
  display: none;
}
/* 默认隐藏所有图片，仅显示初始的pic02 */
.slider-img {
  display: none;
}
/* 选中对应单选框时，显示匹配的图片 */
#radio-pic01:checked ~ #pic01,
#radio-pic02:checked ~ #pic02,
#radio-pic03:checked ~ #pic03 {
  display: block;
}
/* 按钮基础样式，可按需修改 */
.slider-btn {
  cursor: pointer;
  padding: 8px 16px;
  background: #eee;
  display: inline-block;
  margin: 0 10px;
}
</style>

<div class="slider-container">
  <!-- 隐藏的单选框，同名确保同一时间仅一个选中 -->
  <input type="radio" name="slider" id="radio-pic01" class="slider-radio">
  <input type="radio" name="slider" id="radio-pic02" class="slider-radio" checked>
  <input type="radio" name="slider" id="radio-pic03" class="slider-radio">

  <!-- 图片元素 -->
  <img id="pic01" src="images/pic01.jpg" alt="" data-position="center center" class="slider-img">
  <img id="pic02" src="images/pic02.jpg" alt="" data-position="center center" class="slider-img">
  <img id="pic03" src="images/pic03.jpg" alt="" data-position="center center" class="slider-img">

  <!-- 切换按钮，通过label关联单选框 -->
  <label for="radio-pic01" class="slider-button-prev slider-btn"> &gt; </label>
  <label for="radio-pic03" class="slider-button-next slider-btn"> &lt; </label>
</div>

说明：这个方案不会修改URL，交互体验更接近常规JS滑块，且状态切换更稳定。

额外优化 #

如果想增加过渡效果，可把display切换改成opacity+transition，比如：

.slider-img {
  opacity: 0;
  position: absolute;
  transition: opacity 0.3s ease;
}
#radio-pic01:checked ~ #pic01,
#radio-pic02:checked ~ #pic02,
#radio-pic03:checked ~ #pic03 {
  opacity: 1;
  z-index: 1;
}
.slider-container {
  position: relative;
}

内容的提问来源于stack exchange，提问作者vesii