修复JavaScript轮播图导航箭头无效问题：深入理解DOM元素选择与迭代

const buttons = document.getElementsByTagName("button");

const buttonsList = Array.prototype.slice.call(buttons);

// 现代JavaScript替代方案
// const buttonsList = Array.from(buttons);

buttonsList.forEach(button => {
    button.addEventListener("click",  () => {
        // 根据按钮的data-carousel-button属性判断是“下一张”还是“上一张”
        // 注意：原始HTML中data-carousel-button的值是"next-h"和"prev-h"
        // 因此，JavaScript中的判断条件也应与之匹配
        const offset = button.dataset.carouselButton === "next-h" ? 1 : -1;

        const carouselContainer = button.closest("[data-carousel]"); // 找到最近的轮播图容器
        const slidesContainer = carouselContainer.querySelector("[data-slides]"); // 获取轮播图中的所有幻灯片列表

        const activeSlide = slidesContainer.querySelector("[data-active]"); // 获取当前激活的幻灯片
        let newIndex = [...slidesContainer.children].indexOf(activeSlide) + offset; // 计算新幻灯片的索引

        // 循环逻辑：如果到达末尾则回到开头，如果到达开头则回到末尾
        if (newIndex < 0) {
            newIndex = slidesContainer.children.length - 1;
        }
        if (newIndex >= slidesContainer.children.length) {
            newIndex = 0;
        }

        // 激活新的幻灯片并取消旧幻灯片的激活状态
        slidesContainer.children[newIndex].dataset.active = true;
        delete activeSlide.dataset.active;
    });
});

const buttons = document.getElementsByTagName("button");
const buttonsList = Array.prototype.slice.call(buttons); // 或者使用 Array.from(buttons);

buttonsList.forEach(button => {
    button.addEventListener("click",  () => {
        // 修正：根据HTML中的data-carousel-button属性值 "next-h" 或 "prev-h" 来判断
        const offset = button.dataset.carouselButton === "next-h" ? 1 : -1;

        const carouselContainer = button.closest("[data-carousel]");
        const slidesContainer = carouselContainer.querySelector("[data-slides]");

        const activeSlide = slidesContainer.querySelector("[data-active]");
        let newIndex = [...slidesContainer.children].indexOf(activeSlide) + offset;

        if (newIndex < 0) {
            newIndex = slidesContainer.children.length - 1;
        }
        if (newIndex >= slidesContainer.children.length) {
            newIndex = 0;
        }

        slidesContainer.children[newIndex].dataset.active = true;
        delete activeSlide.dataset.active;
    });
});

<div class="carousel-h" data-carousel>
    <button class="carousel-button-h prev-h" data-carousel-button="prev-h">
        <img src="<?= url('assets/icons/button-prev.svg') ?>">
    </button>
    <button class="carousel-button-h next-h" data-carousel-button="next-h">
        <img src="<?= url('assets/icons/button-next.svg') ?>">
    </button>
    <ul data-slides> 
        <li class="slide-h" data-active>
            <img src="images/Fokuss_Poster_web.jpg" alt="">
        </li> 
        <li class="slide-h">
            <img src="images/Rebooth_mockup_prints_web.jpg" alt="">
        </li>  
        <li class="slide-h">
            <img src="images/Kushim_Thumbnail_web.jpg" alt="">
        </li>  
        <li class="slide-h">
            <img src="images/Savo_Mockup_web.jpg" alt="">
        </li>
        <li class="slide-h">
            <img src="images/Foto_Zine_2Sem_12-web.jpg" alt="">
        </li>
        <li class="slide-h">
            <img src="images/Subspace_Mockup_web_0.jpg" alt="">
        </li>
        <li class="slide-h">
            <img src="images/Zeitung_Vision_06-web.jpg" alt="">
        </li>
    </ul>
</div>

.carousel-h {
    width: 100vw;
    height: 100vh;
    position: relative;
}

.carousel-h > ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.slide-h {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: 200ms opacity ease-in-out;
    transition-delay: 200ms;
}

.slide-h > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.slide-h[data-active] {
    opacity: 1;
    z-index: 1;
    transition-delay: 0ms;
}

.carousel-button-h {
    position: absolute;
    background: transparent;
    z-index: 999; /* 确保按钮位于上层，可点击 */
    border: none;
    font-size: 3rem;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(0, 0, 0, 1);
    border-radius: .25rem;
    padding: 0 .5rem;
}

.carousel-button-h.prev-h {
    left: 1rem;
}

.carousel-button-h.next-h {
    right: 1rem;
}