我剛剛開始編程，并在科爾比建立自己的網(wǎng)站。我想在我的網(wǎng)站實(shí)現(xiàn)一個(gè)旋轉(zhuǎn)木馬滑塊，并遵循這個(gè)教程(https://youtu.be/9HcxHDS2w1s)。我完全按照?qǐng)D中所示做了一切，但是我不能點(diǎn)擊我的箭頭，所以幻燈片沒有變化。其他一切看起來都很好，我認(rèn)為只是鏈接。

這是html:

<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>
</section>

這是javascript:

buttons.forEach(button => {
    button.addEventListener("click",  () => {
        const offset = button.dataset.carouselButton === "next" ? 1 : -1
        const slides = button
        .closest("[data-carousel]")
        .querySelector("[data-slides]")

    const activeSlide = slides.querySelector("[data-active]")
    let newIndex = [...slides.children].indexOf(activeSlide) + offset
    if (newIndex < 0) newIndex = slides.children.length -1
    if (newIndex >= slides.children.length) newIndex = 0

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

和css:

.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;
}

我確實(shí)用自己的SVG替換了教程中使用的箭頭，并認(rèn)為這可能是一個(gè)問題，但我也用toptal的HTML代碼嘗試了一下，結(jié)果沒有什么不同。

我盡了最大努力來找出錯(cuò)誤，但無法解決，所以我會(huì)感謝任何幫助！謝謝！

# # #問題出在你的js代碼上。您正在對(duì)未定義的變量使用forEach！如果你注意的話，你會(huì)發(fā)現(xiàn)你的代碼中沒有定義按鈕。因此，讓我們讓您的代碼工作:

首先，您必須使用getElementsByTagName選擇頁面中的所有按鈕。

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

現(xiàn)在，您已經(jīng)選擇了頁面中的所有按鈕，但是buttons變量的類型是object，請(qǐng)注意，不能在對(duì)象上使用forEach。因此，為了使用forEach，您必須使用下面的代碼將對(duì)象轉(zhuǎn)換為數(shù)組:

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

現(xiàn)在，您已經(jīng)準(zhǔn)備好在代碼中使用按鈕列表數(shù)組了。 您的JS代碼應(yīng)該如下所示:

const buttons = document.getElementsByTagName("button");
const buttonsList = Array.prototype.slice.call(buttons);
buttonsList.forEach(button => {
    button.addEventListener("click",  () => {
        const offset = button.dataset.carouselButton === "next" ? 1 : -1
        const slides = button
        .closest("[data-carousel]")
        .querySelector("[data-slides]")

    const activeSlide = slides.querySelector("[data-active]")
    let newIndex = [...slides.children].indexOf(activeSlide) + offset
    if (newIndex < 0) newIndex = slides.children.length -1
    if (newIndex >= slides.children.length) newIndex = 0

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