如何在同一页面运行多个W3幻灯片并实现指定样式的翻页按钮

问题根源 #

原有代码无法支持多组幻灯片同时运行的核心原因：

• 全局共用同一个slideIndex变量，多组幻灯片切换时索引互相干扰
• 选择器会选中页面所有.mySlides元素，无法区分不同幻灯片组的资源

完整实现代码 #

CSS代码 #

/* 分别给三组幻灯片设置隐藏属性 */
.mySlides1, .mySlides2, .mySlides3 {
  display: none;
}

JS代码 #

// 为每组幻灯片定义独立的索引变量
var slideIndex1 = 1;
var slideIndex2 = 1;
var slideIndex3 = 1;

// 初始化所有幻灯片
showDivs(slideIndex1, 1);
showDivs(slideIndex2, 2);
showDivs(slideIndex3, 3);

// 切换幻灯片时传入步长和所属组号
function plusDivs(n, group) {
  if(group === 1) showDivs(slideIndex1 += n, group);
  else if(group === 2) showDivs(slideIndex2 += n, group);
  else if(group === 3) showDivs(slideIndex3 += n, group);
}

function showDivs(n, group) {
  var i;
  // 按组号选择对应幻灯片的元素
  var slideList = document.getElementsByClassName("mySlides" + group);
  // 边界判断
  if (n > slideList.length) {
    group === 1 ? slideIndex1 = 1 : group === 2 ? slideIndex2 = 1 : slideIndex3 = 1;
  }
  if (n < 1) {
    group === 1 ? slideIndex1 = slideList.length : group === 2 ? slideIndex2 = slideList.length : slideIndex3 = slideList.length;
  }
  // 隐藏当前组所有幻灯片
  for (i = 0; i < slideList.length; i++) {
    slideList[i].style.display = "none";  
  }
  // 显示目标幻灯片
  if(group === 1) slideList[slideIndex1-1].style.display = "block";
  else if(group === 2) slideList[slideIndex2-1].style.display = "block";
  else if(group === 3) slideList[slideIndex3-1].style.display = "block";
}

HTML代码 #

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<!-- 第一组幻灯片 -->
<div class="w3-content w3-display-container" style="margin-bottom: 30px;">
  <img class="mySlides1" src="https://www.w3schools.com/w3css/img_snowtops.jpg" style="width:100%">
  <img class="mySlides1" src="https://www.w3schools.com/w3css/img_lights.jpg" style="width:100%">
  <img class="mySlides1" src="https://www.w3schools.com/w3css/img_mountains.jpg" style="width:100%">
  <!-- 按钮添加w3-opacity实现默认半透明，w3-hover-opacity-off实现悬停变实，匹配目标效果 -->
  <button class="w3-button w3-black w3-display-left w3-opacity w3-hover-opacity-off" onclick="plusDivs(-1, 1)">&#10094;</button>
  <button class="w3-button w3-black w3-display-right w3-opacity w3-hover-opacity-off" onclick="plusDivs(1, 1)">&#10095;</button>
</div>

<!-- 第二组幻灯片 -->
<div class="w3-content w3-display-container" style="margin-bottom: 30px;">
  <img class="mySlides2" src="https://www.w3schools.com/w3css/img_snowtops.jpg" style="width:100%">
  <img class="mySlides2" src="https://www.w3schools.com/w3css/img_lights.jpg" style="width:100%">
  <img class="mySlides2" src="https://www.w3schools.com/w3css/img_mountains.jpg" style="width:100%">
  <button class="w3-button w3-black w3-display-left w3-opacity w3-hover-opacity-off" onclick="plusDivs(-1, 2)">&#10094;</button>
  <button class="w3-button w3-black w3-display-right w3-opacity w3-hover-opacity-off" onclick="plusDivs(1, 2)">&#10095;</button>
</div>

<!-- 第三组幻灯片 -->
<div class="w3-content w3-display-container">
  <img class="mySlides3" src="https://www.w3schools.com/w3css/img_snowtops.jpg" style="width:100%">
  <img class="mySlides3" src="https://www.w3schools.com/w3css/img_lights.jpg" style="width:100%">
  <img class="mySlides3" src="https://www.w3schools.com/w3css/img_mountains.jpg" style="width:100%">
  <button class="w3-button w3-black w3-display-left w3-opacity w3-hover-opacity-off" onclick="plusDivs(-1, 3)">&#10094;</button>
  <button class="w3-button w3-black w3-display-right w3-opacity w3-hover-opacity-off" onclick="plusDivs(1, 3)">&#10095;</button>
</div>
</body>
</html>

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