如何修復卡在第一張幻燈片上的這個簡單的 javascript 幻燈片？

Question

我在制作這個簡單的幻燈片時遇到了麻煩。 我認為這與 javascript 有關系，但我的訓練還沒有那么遠，無法理解它。 這是我放在 HTML 正文中的代碼：

<script>
    var slides = document.querySelectorAll('#slides .slide');
    var currentSlide = 0;
    var slideInterval = setInterval(nextSlide,2000);

    function nextSlide(){
        slides[currentSlide].className = 'slide';
        currentSlide = (currentSlide+1)%slides.length;
        slides[currentSlide].className = 'slide showing';
}</script>

<div id="deps">
    <ul id="slides">
        <li class="slide showing">Slide 1</li>
        <li class="slide">Slide 2</li>
        <li class="slide">Slide 3</li>
        <li class="slide">Slide 4</li>
        <li class="slide">Slide 5</li>
    </ul>
</div>

我無法弄清楚問題，因為我什至不知道如何在 js 中編碼。 我只是從在線教程中復制了代碼，但與那里不同的是，我的幻燈片卡在第一個上。

Answer 1

我認為它可能是你的 setInterval 而不是這樣調用它：

setInterval(functionname,2000);

像這樣嘗試：

setInterval(()=>{functionname()},2000);

這給了你這樣的東西：

提琴手

還要確保將所有代碼包裝在 domcontent 事件偵聽器中：

document.addEventListener('DOMContentLoaded',()=>{ /*your javascript code*/ });  

這可確保您在 javascript 中使用 html 元素時可用