HTML实现双手动轮播图时点击切换小点功能失效问题咨询

问题根因 #

两组轮播的指示器小点统一使用了demo类名，JS中document.getElementsByClassName("demo")会全局匹配到所有6个小点，索引对应关系错位，导致点击小点时无法正确匹配到对应轮播的图片。

修改方案 #

1. 修改HTML的小点类名

给两组轮播的小点分别加上独立的类标识，原有样式类保留：
第一组轮播（索引为0）的小点类名改为：

<span class="w3-badge demo demo0 w3-border w3-transparent w3-hover-white" onclick="currentDiv(1, 0)"></span>
<span class="w3-badge demo demo0 w3-border w3-transparent w3-hover-white" onclick="currentDiv(2, 0)"></span>
<span class="w3-badge demo demo0 w3-border w3-transparent w3-hover-white" onclick="currentDiv(3, 0)"></span>

第二组轮播（索引为1）的小点类名改为：

<span class="w3-badge demo demo1 w3-border w3-transparent w3-hover-white" onclick="currentDiv(1, 1)"></span>
<span class="w3-badge demo demo1 w3-border w3-transparent w3-hover-white" onclick="currentDiv(2, 1)"></span>
<span class="w3-badge demo demo1 w3-border w3-transparent w3-hover-white" onclick="currentDiv(3, 1)"></span>

2. 修改JS代码

新增小点类名配置数组，调整showDivs方法的小点获取逻辑：

<script>
var slideIndex = [1,1];
var slideId = ["mySlides1", "mySlides2"]
var dotId = ["demo0", "demo1"] // 新增小点类名配置
showDivs(1, 0);
showDivs(1, 1);

function plusDivs(n, no) {
    showDivs(slideIndex[no] += n, no);
}

function currentDiv(n, no) {
    showDivs(slideIndex[no] = n, no);
}

function showDivs(n, no) {
    var i;
    var x = document.getElementsByClassName(slideId[no]);
    var dots = document.getElementsByClassName(dotId[no]); // 按对应轮播的小点类名获取

    if (n > x.length) {slideIndex[no] = 1}
    if (n < 1) {slideIndex[no] = x.length}
    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", "");
    }
    x[slideIndex[no]-1].style.display = "block"; 
    dots[slideIndex[no]-1].className += " w3-white";
}
</script>

修改完成后点击小点即可正常切换对应轮播的图片，原有的左右箭头切换功能不受影响。

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