JS轮播图className赋值报错、幻灯片堆叠问题排查

两个异常属于同源问题，核心出在类名设置和DOM集合特性上：

• 幻灯片叠层不隐藏问题：第一张轮播项（id为bg的div）初始只设置了slide_active类，没有加公共的slide类，JS获取轮播元素时无法选中它，后续重置所有轮播项为隐藏状态的逻辑不会作用在这个元素上，导致它一直保持显示，新切换的幻灯片就会叠在它下方。
• 控制台className赋值报错：由两个细节共同触发：
  1. 用el.className = "xxx"的方式直接赋值类名，会覆盖元素上所有原有类。当给激活项设置slide_active类时，会把原本的slide类直接删掉；
  2. document.getElementsByClassName("slide")返回的是实时更新的HTMLCollection，只要元素身上的slide类被移除，就会立刻从这个集合中被剔除，集合长度会动态变短，后续按原索引访问元素时就会拿到undefined，抛出"Cannot set properties of undefined"错误。

1. 修改HTML中第一张轮播项的类名，补上公共的slide类：

<!-- 把原来的<div id="bg" class="slide_active">改成下面这行 -->
<div id="bg" class="slide slide_active">

2. 替换JS轮播逻辑，改用静态集合获取轮播元素，避免实时集合的下标错乱问题，同时优化类名修改逻辑，避免覆盖公共类：

let Slide_number = 1;
show_slides(Slide_number);

function Next_Slide(n){
  show_slides(Slide_number += n);
}

function Prev_Slide(n){
  show_slides(Slide_number -= n);
}

function show_slides(n){
  let i;
  // 用querySelectorAll获取静态NodeList，不会随DOM类名变化动态改变长度
  let slides = document.querySelectorAll(".slide");
  // 边界值修正
  if (n > slides.length){
    Slide_number = 1;
  }
  if (n < 1){
    Slide_number = slides.length;
  }
  // 重置所有轮播项为隐藏状态
  for(i=0; i<slides.length; i++){
    slides[i].classList.remove("slide_active");
  }
  // 给当前轮播项加激活状态
  slides[Slide_number-1].classList.add("slide_active");  
}

注：如果不想用classListAPI，也可以在赋值类名时保留slide类，比如隐藏时设slides[i].className = "slide"，激活时设slides[Slide_number-1].className = "slide slide_active"，效果一致，只是classList写法更易维护。

3. 可选优化：当前上下切换按钮放在第一张轮播项#bg内部，切换到其他幻灯片时按钮会跟着被隐藏，建议把#prev和#next两个按钮移到slideshow_container容器的直接子级，和三个轮播项平级，保证切换到任意幻灯片都能看到操作按钮。

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