当先锋百科网

首页 1 2 3 4 5 6 7

幻灯片导航箭头链接不起作用

我刚刚开始编程，并在科尔比建立自己的网站。我想在我的网站实现一个旋转木马滑块，并遵循这个教程(https://youtu.be/9HcxHDS2w1s)。我完全按照图中所示做了一切，但是我不能点击我的箭头，所以幻灯片没有变化。其他一切看起来都很好，我认为只是链接。

这是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;
}

我确实用自己的SVG替换了教程中使用的箭头，并认为这可能是一个问题，但我也用toptal的HTML代码尝试了一下，结果没有什么不同。

我尽了最大努力来找出错误，但无法解决，所以我会感谢任何帮助！谢谢！

# # #问题出在你的js代码上。您正在对未定义的变量使用forEach！如果你注意的话，你会发现你的代码中没有定义按钮。因此，让我们让您的代码工作:

首先，您必须使用getElementsByTagName选择页面中的所有按钮。

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

现在，您已经选择了页面中的所有按钮，但是buttons变量的类型是object，请注意，不能在对象上使用forEach。因此，为了使用forEach，您必须使用下面的代码将对象转换为数组:

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

现在，您已经准备好在代码中使用按钮列表数组了。 您的JS代码应该如下所示:

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
    })
})