如何调整HTML 3D图片轮播组件实现8张幻灯片正确切换

1. 修复HTML标签关联错误 #

你新增的3张幻灯片的label标签for属性绑定错误，导致单选按钮和幻灯片对应关系混乱，修改对应label部分代码即可：

<section id="slider">
  <input type="radio" name="slider" id="s1" checked>
  <input type="radio" name="slider" id="s2">
  <input type="radio" name="slider" id="s3">
  <input type="radio" name="slider" id="s4">
  <input type="radio" name="slider" id="s5">
  <input type="radio" name="slider" id="s6">
  <input type="radio" name="slider" id="s7">
  <input type="radio" name="slider" id="s8">
  <label for="s1" id="slide1"><img src="https://img.freepik.com/free-photo/empty-sea-beach-background_74190-313.jpg?size=626&ext=jpg" alt=""></label>
  <label for="s2" id="slide2"><img src="https://t4.ftcdn.net/jpg/03/09/56/17/360_F_309561741_65AVmSUj9PuybfZFo2McgkOw6jTxfCtc.jpg" alt=""></label>
  <label for="s3" id="slide3"><img src="https://thumbs.dreamstime.com/b/sunrise-over-beach-cancun-beautiful-mexico-40065727.jpg" alt=""></label>
  <label for="s4" id="slide4"><img src="https://media.istockphoto.com/photos/couple-relax-on-the-beach-enjoy-beautiful-sea-on-the-tropical-island-picture-id1160947136?k=20&m=1160947136&s=612x612&w=0&h=TdExAS2--H3tHQv2tc5woAl7e0zioUVB5dbIz6At0I4=" alt=""></label>
  <label for="s5" id="slide5"><img src="https://image.shutterstock.com/image-photo/chairs-umbrella-palm-beach-tropical-260nw-559599520.jpg" alt=""></label>
  <!-- 修正下面三个label的for属性 -->
  <label for="s6" id="slide6"><img src="https://media.istockphoto.com/photos/tropical-beach-in-punta-cana-dominican-republic-caribbean-island-picture-id1150862958?b=1&k=20&m=1150862958&s=170667a&w=0&h=Fp6mNIh4pWJBBnm4dkpQfi-rjU-9D-HzEAV5Zgyc6wE=" alt=""></label>
  <label for="s7" id="slide7"><img src="https://cdn.pixabay.com/photo/2016/10/18/21/22/beach-1751455__480.jpg" alt=""></label>
  <label for="s8" id="slide8"><img src="https://img.freepik.com/free-photo/beautiful-tropical-empty-beach-sea-ocean-with-white-cloud-blue-sky-background_74190-13665.jpg?size=626&ext=jpg" alt=""></label>
</section>

2. 修复CSS样式规则 #

2.1 调整单选按钮居中偏移 #

8个单选按钮总宽度比5个大，原来的偏移值无法居中，修改input[type=radio]的transform属性：

input[type=radio] {
  position: relative;
  top: 108%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: 0 15px 0 0;
  opacity: 0.4;
  transform: translateX(-125px); /* 从-83px改成-125px */
  cursor: pointer;
}

2.2 新增幻灯片默认隐藏规则 #

原来5张幻灯片刚好所有都分配了展示位置，8张会有3张幻灯片没有匹配的位置规则，默认堆在最上层导致显示异常，新增默认样式：

#slider label {
  transform: translate3d(0, 0, -400px);
  opacity: 0;
  transition: all 400ms ease;
}

对应原来的位置匹配规则里都加上opacity:1，比如激活态规则里加：

#s1:checked ~ #slide1,
#s2:checked ~ #slide2,
#s3:checked ~ #slide3,
#s4:checked ~ #slide4,
#s5:checked ~ #slide5,
#s6:checked ~ #slide6,
#s7:checked ~ #slide7,
#s8:checked ~ #slide8 {
  box-shadow: 0 13px 26px rgba(0,0,0, 0.3), 0 12px 6px rgba(0,0,0, 0.2);
  transform: translate3d(0%, 0, 0px);
  opacity: 1; /* 新增透明度 */
}

下一张、下下张、上上张、上一张的规则里都同样加上opacity: 1;即可。

2.3 修正位置偏移映射 #

原来的偏移规则还是5张的循环逻辑，改成8张的循环逻辑即可，修改后完整的位置规则如下：

/* 下一张幻灯片 */
#s1:checked ~ #slide2,
#s2:checked ~ #slide3,
#s3:checked ~ #slide4,
#s4:checked ~ #slide5,
#s5:checked ~ #slide6,
#s6:checked ~ #slide7,
#s7:checked ~ #slide8,
#s8:checked ~ #slide1{
  box-shadow: 0 6px 10px rgba(0,0,0, 0.3), 0 2px 2px rgba(0,0,0, 0.2);
  transform: translate3d(20%, 0, -100px);
  opacity: 1;
}
/* 下下张幻灯片 */
#s1:checked ~ #slide3,
#s2:checked ~ #slide4,
#s3:checked ~ #slide5,
#s4:checked ~ #slide6,
#s5:checked ~ #slide7,
#s6:checked ~ #slide8,
#s7:checked ~ #slide1,
#s8:checked ~ #slide2
{
  box-shadow: 0 1px 4px rgba(0,0,0, 0.4);
  transform: translate3d(40%, 0, -250px);
  opacity: 1;
}
/* 上上张幻灯片 */
#s1:checked ~ #slide7,
#s2:checked ~ #slide8,
#s3:checked ~ #slide1,
#s4:checked ~ #slide2,
#s5:checked ~ #slide3,
#s6:checked ~ #slide4,
#s7:checked ~ #slide5,
#s8:checked ~ #slide6
{
  box-shadow: 0 1px 4px rgba(0,0,0, 0.4);
  transform: translate3d(-40%, 0, -250px);
  opacity: 1;
}
/* 上一张幻灯片 */
#s1:checked ~ #slide8,
#s2:checked ~ #slide1,
#s3:checked ~ #slide2,
#s4:checked ~ #slide3,
#s5:checked ~ #slide4,
#s6:checked ~ #slide5,
#s7:checked ~ #slide6,
#s8:checked ~ #slide7{
  box-shadow: 0 6px 10px rgba(0,0,0, 0.3), 0 2px 2px rgba(0,0,0, 0.2);
  transform: translate3d(-20%, 0, -100px);
  opacity: 1;
}

修改完成后即可实现和5幻灯片版本一致的3D切换效果。

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