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

这给你这样的东西：

jsfiddle

还要确保将所有代码包装在domcontent事件监听器中：

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

这可确保您在javascript中使用html元素时可以使用它们

如何修复卡在第一张幻灯片上的简单javascript幻灯片？

1 个答案: