单页多轮播组件异常求助：左右箭头仅控制下方轮播

嗨Rachel，我完全懂你遇到的问题了——你的两个轮播组件现在共用了全局的slideIndex变量和一套未区分实例的函数，所以点击箭头时只会作用到最后匹配到的轮播（也就是页面下方的那个）。咱们不用大改你基于W3School写的代码，只需要给每个轮播单独维护状态，让函数能区分不同的轮播实例就行。

核心问题分析 #

• 原来的slideIndex是全局变量，两个轮播共用同一个索引值，导致操作混乱
• showDivs函数里直接获取所有mySlides类的元素，没有区分mySlides2的轮播
• 所有轮播的指示器（dots）共用了demo类，也没有和对应轮播绑定

修改方案（最小改动） #

我们只需要做这几点调整：

1. 用一个对象存储不同轮播的索引，代替全局的slideIndex
2. 给每个函数添加轮播类名参数，让它们知道要操作哪个轮播
3. 调整HTML里的点击事件，传递对应轮播的类名
4. 给每个轮播的指示器添加专属类，避免互相干扰

修改后的完整可运行代码

<!DOCTYPE html>
<html>
<head>
  <link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet" />
  <style>
    .mySlides, .mySlides2 {display: none}
    .w3-left, .w3-right, .w3-badge {cursor: pointer}
    .w3-badge {height: 13px; width: 13px; padding: 0}
  </style>
</head>
<body>
<div class="w3-container">
  <h2>Slideshow Indicators</h2>
  <p>An example of using buttons to indicate how many slides there are in the slideshow, and which slide the user is currently viewing.</p>
</div>

<div class="w3-content w3-display-container" style="max-width:800px">
  <img class="mySlides" src="https://www.w3schools.com/w3images/nature_wide.jpg" style="width:100%">
  <img class="mySlides" src="https://www.w3schools.com/w3images/fjords_wide.jpg" style="width:100%">
  <img class="mySlides" src="https://www.w3schools.com/w3images/mountains_wide.jpg" style="width:100%">
  <div class="w3-center w3-container w3-section w3-large w3-text-white w3-display-bottommiddle" style="width:100%">
    <div class="w3-left w3-hover-text-khaki" onclick="plusDivs(-1, 'mySlides')">&#10094;</div>
    <div class="w3-right w3-hover-text-khaki" onclick="plusDivs(1, 'mySlides')">&#10095;</div>
    <span class="w3-badge demo-1 w3-border w3-transparent w3-hover-white" onclick="currentDiv(1, 'mySlides')"></span>
    <span class="w3-badge demo-1 w3-border w3-transparent w3-hover-white" onclick="currentDiv(2, 'mySlides')"></span>
    <span class="w3-badge demo-1 w3-border w3-transparent w3-hover-white" onclick="currentDiv(3, 'mySlides')"></span>
  </div>
</div>
<br><br><br><br><br>
<div class="w3-container">
  <h2>Slideshow Indicators</h2>
  <p>An example of using buttons to indicate how many slides there are in the slideshow, and which slide the user is currently viewing.</p>
</div>

<div class="w3-content w3-display-container" style="max-width:800px">
  <img class="mySlides2" src="https://www.w3schools.com/w3images/nature_wide.jpg" style="width:100%">
  <img class="mySlides2" src="https://www.w3schools.com/w3images/fjords_wide.jpg" style="width:100%">
  <img class="mySlides2" src="https://www.w3schools.com/w3images/mountains_wide.jpg" style="width:100%">
  <div class="w3-center w3-container w3-section w3-large w3-text-white w3-display-bottommiddle" style="width:100%">
    <div class="w3-left w3-hover-text-khaki" onclick="plusDivs(-1, 'mySlides2')">&#10094;</div>
    <div class="w3-right w3-hover-text-khaki" onclick="plusDivs(1, 'mySlides2')">&#10095;</div>
    <span class="w3-badge demo-2 w3-border w3-transparent w3-hover-white" onclick="currentDiv(1, 'mySlides2')"></span>
    <span class="w3-badge demo-2 w3-border w3-transparent w3-hover-white" onclick="currentDiv(2, 'mySlides2')"></span>
    <span class="w3-badge demo-2 w3-border w3-transparent w3-hover-white" onclick="currentDiv(3, 'mySlides2')"></span>
  </div>
</div>

<script>
// 用对象存储不同轮播的索引，key对应轮播的类名
let slideIndexes = {
  mySlides: 1,
  mySlides2: 1
};

// 初始化两个轮播
showDivs(slideIndexes.mySlides, 'mySlides');
showDivs(slideIndexes.mySlides2, 'mySlides2');

function plusDivs(n, slideClass) {
  showDivs(slideIndexes[slideClass] += n, slideClass);
}

function currentDiv(n, slideClass) {
  showDivs(slideIndexes[slideClass] = n, slideClass);
}

function showDivs(n, slideClass) {
  var i;
  // 获取当前轮播的所有slide元素
  var x = document.getElementsByClassName(slideClass);
  // 匹配当前轮播对应的指示器类
  var demoClass = slideClass === 'mySlides' ? 'demo-1' : 'demo-2';
  var dots = document.getElementsByClassName(demoClass);
  
  if (n > x.length) {slideIndexes[slideClass] = 1}
  if (n < 1) {slideIndexes[slideClass] = x.length}
  
  // 隐藏当前轮播的所有slide
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  // 重置当前轮播的指示器样式
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" w3-white", "");
  }
  
  // 显示当前slide并激活对应指示器
  x[slideIndexes[slideClass] - 1].style.display = "block";
  dots[slideIndexes[slideClass] - 1].className += " w3-white";
}
</script>
</body>
</html>

关键改动说明 #

• 新增slideIndexes对象，分别维护两个轮播的当前索引，避免全局变量冲突
• 给每个轮播的指示器添加专属类（demo-1/demo-2），确保操作互不干扰
• 所有函数新增slideClass参数，明确指定要操作的轮播实例
• 调整HTML点击事件，传递对应的轮播类名参数
• 替换图片占位地址为真实可访问的图片，保证代码直接运行

这样修改后，两个轮播就能独立工作，点击各自的箭头和指示器都会只控制对应的轮播，完全保留了你原有的代码结构和W3School的样式风格。

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