解决JavaScript滑块控制中因变量作用域导致的显示问题

function showSlide(slideIndex) {    var slides = document.getElementsByClassName("slide"); // 局部变量    for (var i = 0; i < slides.length; i++) {        slides[i].style.display = "none";    }    slides[slideIndex].style.display = "block";}

// 全局变量声明var _PARENT_ANGLE = 0;var _CHILD_ANGLE = 0;var slideIndex = 0;var slides = document.getElementsByClassName("slide"); // 将 slides 声明为全局变量// 显示指定索引的幻灯片function showSlide(index) {    // 隐藏所有幻灯片    for (var i = 0; i = slides.length) {        slideIndex = 0; // 循环到第一张    }    showSlide(slideIndex);}// 切换到上一张幻灯片function previousSlide() {    slideIndex--;    if (slideIndex  0) {    elements[0].style.display = "block";  }}// 页面加载后执行初始化document.addEventListener('DOMContentLoaded', function() {    // 确保 DOM 完全加载后再获取元素和绑定事件    // 初始化显示第一张幻灯片    showSlide(slideIndex);    // 绑定前进按钮事件    document.querySelector(".next").addEventListener('click', function() {        _PARENT_ANGLE -= 90;        _CHILD_ANGLE += 90;        document.querySelector("#parent").style.transform = 'rotate(' + _PARENT_ANGLE + 'deg)';        document.querySelector("#a-wrapper").style.transform = 'rotate(' + _CHILD_ANGLE + 'deg)';        document.querySelector("#b-wrapper").style.transform = 'rotate(' + _CHILD_ANGLE + 'deg)';        document.querySelector("#c-wrapper").style.transform = 'rotate(' + _CHILD_ANGLE + 'deg)';        document.querySelector("#d-wrapper").style.transform = 'rotate(' + _CHILD_ANGLE + 'deg)';        nextSlide(); // 调用下一张幻灯片逻辑    });    // 绑定后退按钮事件    document.querySelector(".prev").addEventListener('click', function() {        _PARENT_ANGLE += 90;        _CHILD_ANGLE -= 90;        document.querySelector("#parent").style.transform = 'rotate(' + _PARENT_ANGLE + 'deg)';        document.querySelector("#a-wrapper").style.transform = 'rotate(' + _CHILD_ANGLE + 'deg)';        document.querySelector("#b-wrapper").style.transform = 'rotate(' + _CHILD_ANGLE + 'deg)';        document.querySelector("#c-wrapper").style.transform = 'rotate(' + _CHILD_ANGLE + 'deg)';        document.querySelector("#d-wrapper").style.transform = 'rotate(' + _CHILD_ANGLE + 'deg)';        previousSlide(); // 调用上一张幻灯片逻辑    });});

                                  /* ... 省略大部分CSS，与原问题一致 ... */        .slide {display: none;} /* 默认隐藏所有幻灯片 */        /* ... 其他样式 ... */        /* 幻灯片内容样式 */        #a-description, #b-description, #c-description, #d-description {            position: absolute;            width: 100%;            /* 其他定位和样式 */        }        #a-description .box, #b-description .box, #c-description .box, #d-description .box {            max-width: 350px;            margin: 30px auto;            padding: 20px;            background-color: #fff;            /* 边框颜色根据幻灯片内容变化 */        }        #a-description p, #b-description p, #c-description p, #d-description p {            font-family: Arial, Helvetica, sans-serif;            font-size: 16px;            font-weight: bold;            margin: 0px;            padding: 0px;            /* 文本颜色根据幻灯片内容变化 */        }            
                
            
                
Nam volutpat efficitur semper. Nullam aliquet tortor id mollis vehicula.
            
        
        
            
                
Vestibulum ac blandit libero, vel lacinia magna. Vestibulum nec commodo magna.
            
        
        
            
                
In dictum, lectus nec rhoncus viverra, est elit vehicula leo, at bibendum mi enim in sem.
            
        
        
            
                
Aenean mollis leo sit amet libero volutpat, vitae cursus arcu ultrices.
            
        
    
    
                ❮        ❯        
                        
                
                    
1
                
                
                    
2
                
                
                    
3
                
                
                    
4
                
            
        
    
           

    :root {        --circle-purple: #7308ae;        --circle-red: #fd0000;        --circle-blue: #1241242a6;        --circle-green: #06ca04;    }    * {        box-sizing: border-box;    }    body {        margin: 0;        padding: 0;        background-color: #7af;    }    .outer {        position: absolute;        height: 100%;        width: 100%;        margin: 0 auto;        padding: 0;        overflow: hidden;        z-index: 1;    }    .middle {        height: 300px;        width: 300px;        left: 50%;        bottom: 100px;        display: block;        position: absolute;        text-align: center;        vertical-align: middle;        margin-top: -150px;        margin-left: -150px;        z-index: 1;    }    .button {        cursor: pointer;        position: relative;        width: 50px;        height: 50px;        margin: 0px 20px;        border-radius: 50%;        background-color: rgba(0,0,0,0.1);        font-size: 20px;        font-weight: bold;        color: rgba(255,255,255,0.5);        border: 1px solid transparent;        z-index: 10;    }    .button:hover {        color: rgba(0,0,0,0.6);        border: 1px solid rgba(0,0,0,0.6);    }    .prev {        position: absolute;        top: 50%;        left: 0%;    }    .next {        position: absolute;        top: 50%;        right: 0%;    }    .circle {        font-family: Arial, Helvetica, sans-serif;        font-size: 70px;        border-style: solid;        border-width: 10px;    }    .purple {color: var(--circle-purple);border-color: var(--circle-purple);}    .red {color: var(--circle-red);border-color: var(--circle-red);}    .blue {color: var(--circle-blue);border-color: var(--circle-blue);}    .green {color: var(--circle-green);border-color: var(--circle-green);}    .slide {display: none;} /* 关键：默认隐藏所有幻灯片 */    #parent {        position: relative;        width: 300px;        height: 300px;        border: none;        outline: 80px solid rgba(0,0,0,0.1);        outline-offset: -40px;        border-radius: 50%;        transform: rotate(0deg);        transition: transform 0.7s linear;    }    #a-wrapper {        position: absolute;        width: 100px;        height: 100px;        transform: rotate(0deg);        transition: transform 0.7s linear;        top: -80px;        left: 100px;        z-index: 3;    }    #a-icon {        position: relative;        width: 100px;        height: 100px;        border-radius: 50%;        background: white;        z-index: 3;    }    #a-description {        position: absolute;        width: 100%;    }    #a-description .box {        max-width: 350px;        left: 50%;        background-color: #fff;        border: 7px solid var(--circle-purple);        margin: 30px auto;        padding: 20px;    }    #a-description p {        font-family: Arial, Helvetica, sans-serif;        font-size: 16px;        font-weight: bold;        color: var(--circle-purple);        margin: 0px;        padding: 0px;    }    #b-wrapper {        position: absolute;        width: 100px;        height: 100px;        transform: rotate(0deg);        transition: transform 0.7s linear;        top: 100px;        right: -80px;        z-index: 3;    }    #b-icon {        position: relative;        width: 100px;        height: 100px;        border-radius: 50%;        background: white;        z-index: 3;    }    #b-description {        position: absolute;        width: 100%;    }    #b-description .box {        max-width: 350px;        left: 50%;        background-color: #fff;        border: 7px solid var(--circle-red);        margin: 30px auto;        padding: 20px;    }    #b-description p {        font-family: Arial, Helvetica, sans-serif;        font-size: 16px;        font-weight: bold;        color: var(--circle-red);        margin: 0px;        padding: 0px;    }    #c-wrapper {        position: absolute;        width: 100px;        height: 100px;        transform: rotate(0deg);        transition: transform 0.7s linear;        bottom: -80px;        left: 100px;        z-index: 3;    }    #c-icon {        position: relative;        width: 100px;        height: 100px;        border-radius: 50%;        background: white;        z-index: 3;    }    #c-description {        position: absolute;        width: 100%;    }    #c-description .box {        max-width: 350px;        left: 50%;        background-color: #fff;        border: 7px solid var(--circle-blue);        margin: 30px auto;        padding: 20px;    }    #c-description p {        font-family: Arial, Helvetica, sans-serif;        font-size: 16px;        font-weight: bold;        color: var(--circle-blue);        margin: 0px;        padding: 0px;    }    #d-wrapper {        position: absolute;        width: 100px;        height: 100px;        transform: rotate(0deg);        transition: transform 0.7s linear;        top: 100px;        left: -80px;        z-index: 3;    }    #d-icon {        position: relative;        width: 100px;        height: 100px;        border-radius: 50%;        background: white;        z-index: 3;    }    #d-description {        position: absolute;        width: 100%;    }    #d-description .box {        max-width: 350px;        left: 50%;        background-color: #fff;        border: 7px solid var(--circle-green);        margin: 30px auto;        padding: 20px;    }    #d-description p {        font-family: Arial, Helvetica, sans-serif;        font-size: 16px;        font-weight: bold;        color: var(--circle-green);        margin: 0px;        padding: 0px;    }