JS图片滑动轮播3张运行正常，4张及以上循环失效问题求助

问题根源 #

你的轮播逻辑边界判断仅校验了图片数量，未同步校验指示点（dot）数量，当轮播图片数量>指示点数量时，slideIndex 会增长到超过指示点数组的长度，此时执行y[slideIndex[no]-1].className 会触发数组下标溢出报错，导致JS代码中断执行，轮播循环失效。
你初始化slideIndex的配置也存在错误，所有轮播的初始索引都应该为1，而不是顺次递增的1-6，部分场景下会导致首次加载就出现异常。

修复方案 #

1. 修正slideIndex初始值
2. 修改showSlides函数的边界判断逻辑，取图片数量和指示点数量的最小值作为slideIndex的最大边界值
3. 可选优化：如果不需要鼠标移出指示点时停留在当前选中页，可以调整unhoverSlide逻辑，避免重复触发无意义的showSlides调用

修改后的完整JS代码 #

// 修正初始slideIndex，所有轮播初始都指向第1张图
var slideIndex = [1, 1, 1, 1, 1, 1];
var slideId = ["mySlides1", "mySlides2","mySlides3","mySlides4","mySlides5","mySlides6"];
var dots = ["dot1","dot2","dot3","dot4","dot5","dot6"];

showSlides(1, 0);
showSlides(1, 1);
showSlides(1, 2);
showSlides(1, 3);
showSlides(1, 4);
showSlides(1, 5);

function plusSlides(n, no) {
  showSlides(slideIndex[no] += n, no);
}

function currentSlide(n, no) {
  showSlides(slideIndex[no] = n, no);
}

function hoverSlide(n, no){
  showSlides(slideIndex[no] = n, no);
}

// 如果你需要鼠标移出后回到之前的轮播进度，可以修改这个函数的逻辑，当前保持你原逻辑不变
function unhoverSlide(n, no){
  showSlides(slideIndex[no] = n, no);
}

function showSlides(n, no) {
  var i;
  var x = document.getElementsByClassName(slideId[no]);
  var y = document.getElementsByClassName(dots[no]);
  // 取图片、指示点数量的最小值作为最大边界
  var maxIndex = Math.min(x.length, y.length);
  if (n > maxIndex) {slideIndex[no] = 1}
  if (n < 1) {slideIndex[no] = maxIndex}

  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }

  for (i = 0; i < y.length; i++) {
    y[i].className = y[i].className.replace(" active", "");
  }

  x[slideIndex[no]-1].style.display = "block";
  y[slideIndex[no]-1].className += " active";
}

如果你不需要隐藏超出指示点数量的图片，只是要保证指示点和显示的图片循环对应，也可以选择保持边界判断用图片数量，访问指示点的时候对索引取模即可：

// 把最后一行赋值指示点active的代码替换为下面这行即可
y[(slideIndex[no]-1) % y.length].className += " active";

这种方案下，4张图对应3个指示点的时候，第4张图会对应第1个指示点高亮，符合循环对应需求。

额外说明 #

如果你的轮播图片数量和指示点数量是一一对应的，只需要在新增图片的时候同步新增对应数量的dot标签即可，不需要修改JS逻辑也能正常运行。

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