自动图片滑块问题：切换时第二个指示点无法激活求协助

你的问题出在两个核心点：

1. 重复的控制导航元素：每个滑块内部都包含一套ol.controlnav，导致document.querySelectorAll("ol.controlnav li a")会选中4个<a>标签（两个滑块各2个），而非预期的2个，切换时错误操作了所有4个元素。
2. 冗余且错误的循环逻辑：嵌套循环导致类的添加/移除被重复执行，逻辑混乱。

修复步骤 #

1. 将控制导航从每个滑块内部移出，作为所有滑块的全局控制组件，避免重复元素。
2. 简化JavaScript逻辑，移除嵌套循环，统一先清除所有激活状态，再给当前滑块和对应指示点添加激活类。
3. 明确初始化count变量，避免全局变量未定义的问题。

修改后的代码 #

HTML代码

<div class="containimg">
    <div class="imageright sliderimg active">
        <div class="textimage">
            <h1>I am</h1>
            <h2>a Designer</h2>
            <h3>100% html5 bootstrap templates Made</h3>
            <h3>by <a href="#" class="underline">colorlib.com</a></h3>
            <button class="viewportfolio mt-4">view portfolio <i
                    class="fa-solid fa-suitcase"></i></button>
        </div>
    </div>

    <div class="imageright2 sliderimg">
        <div class="textimage">
            <h1>Hi!</h1>
            <h2>I'm Sarah</h2>
            <h3>100% html5 bootstrap templates Made</h3>
            <h3>by <a href="#" class="underline">colorlib.com</a></h3>
            <button class="viewportfolio mt-4">view portfolio <i
                    class="fa-solid fa-suitcase"></i></button>
        </div>
    </div>
    <!-- 全局控制导航，移到滑块外部 -->
    <ol class="controlnav controlpaging">
        <li><a href="#" class="controlactive">1</a></li>
        <li><a href="#">2</a></li>
    </ol>
</div>

JavaScript代码

// 初始化count变量
let count = 0;

function displayImage() {
    const slides = document.querySelectorAll(".sliderimg");
    const pointers = document.querySelectorAll("ol.controlnav li a");

    // 移除所有滑块和指示点的激活状态
    slides.forEach(slide => slide.classList.remove("active"));
    pointers.forEach(pointer => pointer.classList.remove("controlactive"));

    // 给当前滑块和对应指示点添加激活状态
    slides[count].classList.add("active");
    pointers[count].classList.add("controlactive");

    // 更新count，循环切换
    count = (count + 1) % slides.length;
}

// 启动自动切换
setInterval(displayImage, 4000);

CSS代码（补充定位父级与默认样式）

.containimg {
    position: relative; /* 添加父级定位，让控制导航相对于容器定位 */
}

.containimg .sliderimg {
    display: none;
}

.containimg .sliderimg.active.imageright {
    display: flex;
    animation: opac 0.8s;
}

.containimg .sliderimg.active.imageright2 {
    display: flex;
    animation: opac 0.8s;
}

.containimg .sliderimg.active.imageright3 {
    display: block;
    position: relative;
}

.imageright {
    background-image: url('https://themewagon.github.io/jackson/images/img_bg_2.jpg');
    background-size: cover;
    background-position: center;
    height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
}

.imageright2 {
    background-image: url('https://themewagon.github.io/jackson/images/img_bg_1.jpg');
    background-size: cover;
    background-position: center;
    height: 100vh;
    display: none;
    align-items: center;
    position: relative;
}

.controlnav {
    position: absolute;
    text-align: center;
    bottom: 20px;
    z-index: 1000;
    left: 20px;
    width: auto;
    margin: 0;
    padding: 0;
    list-style: none;
}

.controlnav li {
    margin: 8px;
    display: inline-block; /* 让指示点横向排列 */
}

.controlpaging li a {
    width: 12px;
    height: 12px;
    display: block;
    cursor: pointer;
    text-indent: -9999px;
    box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
    border-radius: 20px;
    background: #fff; /* 默认背景色，让未激活状态可见 */
}

.controlpaging li a.controlactive {
    background: rgba(147, 147, 147, 0.795);
}

/* 补全动画定义 */
@keyframes opac {
    from { opacity: 0; }
    to { opacity: 1; }
}

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