左右并排图片轮播右侧正常切换、左侧卡顿在首张的问题求助

嗨，我帮你找到问题根源啦！

你遇到的问题核心是全局作用域的命名冲突：你写了两段结构几乎完全一致的轮播脚本，但两段脚本里的变量名myIndex和函数名carousel完全重复了。

浏览器在执行代码时，全局作用域里的同名变量/函数会被后面定义的覆盖。也就是说，当页面加载到右侧轮播的脚本时，它会直接替换掉左侧轮播的myIndex变量和carousel函数，最终只有右侧的轮播逻辑能正常运行，左侧的轮播因为逻辑被覆盖，就卡在第一张图不动了。

解决方案1：给变量和函数添加唯一命名 #

把两段脚本的变量和函数名改成不一样的，避免冲突：

左侧轮播的脚本修改为：

var myIndexLeft = 0;
carouselLeft();

function carouselLeft() {
  var i;
  var x = document.getElementsByClassName("mySlides");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  myIndexLeft++;
  if (myIndexLeft > x.length) {myIndexLeft = 1}
  x[myIndexLeft-1].style.display = "block";
  setTimeout(carouselLeft, 2500); // Change image every 3 seconds
}

右侧轮播的脚本修改为：

var myIndexRight = 0;
carouselRight();

function carouselRight() {
  var i;
  var x = document.getElementsByClassName("mySlides1");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  myIndexRight++;
  if (myIndexRight > x.length) {myIndexRight = 1}
  x[myIndexRight-1].style.display = "block";
  setTimeout(carouselRight, 2500); // Change image every 3 seconds
}

解决方案2：封装成可复用的轮播函数（更简洁） #

如果不想写重复代码，可以把轮播逻辑封装成一个通用函数，通过传入不同的类名来控制不同的轮播，从根源避免命名冲突：

把原来的两段脚本替换成下面这一段即可：

// 通用轮播函数
function initCarousel(slideClassName, intervalTime) {
  let currentIndex = 0;
  const slides = document.getElementsByClassName(slideClassName);

  function rotateSlides() {
    // 隐藏所有图片
    for (let i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
    }
    // 更新索引并显示对应图片
    currentIndex++;
    if (currentIndex > slides.length) {
      currentIndex = 1;
    }
    slides[currentIndex - 1].style.display = "block";
    // 递归调用实现轮播
    setTimeout(rotateSlides, intervalTime);
  }

  // 启动轮播
  rotateSlides();
}

// 初始化左侧轮播
initCarousel("mySlides", 2500);
// 初始化右侧轮播
initCarousel("mySlides1", 2500);

这样不仅解决了冲突问题，后续如果要加更多轮播，只需要调用initCarousel传入对应的类名和间隔时间就行，代码更易维护~

备注：内容来源于stack exchange，提问作者Gerge Gansky