无需JavaScript实现带导航幻灯片 代码运行异常求助

首先修复HTML代码的已知错误 #

你的代码存在一个基础匹配错误：第一个单选框的ID写为id="rl"（使用了小写字母L），但下方对应导航标签的属性是for="r1"（使用了数字1），二者ID不匹配会导致第一个导航按钮无法触发切换，修正后的完整HTML代码如下：

<div class="slidershow middle">
  <div class="slides">
    <input type="radio" name="r" id="r1" checked>
    <input type="radio" name="r" id="r2">
    <input type="radio" name="r" id="r3">
    <input type="radio" name="r" id="r4">
    <input type="radio" name="r" id="r5">
    <div class="slide s1">
      <img src="images/Making_Pasta.jpg" alt="Making_Pasta">
    </div>
    <div class="slide">
      <img src="images/noodles.jpg" alt="noodles">
    </div>
    <div class="slide">
      <img src="images/pasta.jpg" alt="pasta">
    </div>
    <div class="slide">
      <img src="images/pesto.jpg" alt="pesto">
    </div>
    <div class="slide">
      <img src="images/flatbread.jpg" alt="flatbread">
    </div>
  </div>
  <div class="navigation">
    <label for="r1" class="bar"></label>
    <label for="r2" class="bar"></label>
    <label for="r3" class="bar"></label>
    <label for="r4" class="bar"></label>
    <label for="r5" class="bar"></label>
  </div>
</div>

配套可用CSS代码 #

你可以直接使用下方CSS实现无JS幻灯片切换效果，直接复制到你的样式文件或者<style>标签内即可生效：

/* 全局样式可根据你的作业要求调整 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.slidershow {
  width: 700px;
  height: 400px;
  overflow: hidden;
}
.middle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* 隐藏原生单选框 */
.slides input {
  display: none;
}
.slides {
  width: 500%;
  height: 100%;
  display: flex;
}
.slide {
  width: 20%;
  transition: 0.6s ease;
}
.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 导航按钮样式 */
.navigation {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
}
.bar {
  width: 50px;
  height: 10px;
  border: 2px solid #fff;
  cursor: pointer;
  transition: 0.4s;
  background: rgba(255,255,255,0.3);
}
.bar:hover {
  background: #fff;
}
/* 单选框选中时对应切换幻灯片 */
#r1:checked ~ .s1 {
  margin-left: 0;
}
#r2:checked ~ .s1 {
  margin-left: -20%;
}
#r3:checked ~ .s1 {
  margin-left: -40%;
}
#r4:checked ~ .s1 {
  margin-left: -60%;
}
#r5:checked ~ .s1 {
  margin-left: -80%;
}
#r1:checked ~ .navigation label[for="r1"],
#r2:checked ~ .navigation label[for="r2"],
#r3:checked ~ .navigation label[for="r3"],
#r4:checked ~ .navigation label[for="r4"],
#r5:checked ~ .navigation label[for="r5"] {
  background: #fff;
}

效果说明 #

点击底部的导航条即可切换对应幻灯片，所有切换逻辑通过CSS的:checked伪类和同级选择器实现，完全不需要JavaScript，幻灯片切换自带过渡动画，你可以根据作业要求调整尺寸、颜色、过渡时长等参数。

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