Javascript - 设置间隔以推进幻灯片放映

Question

我已经按照 w3 schools 手动幻灯片教程创建了一个基本图片库。我正在尝试通过使用 setInterval() 添加一些功能来推进图像，即使用户没有单击按钮也是如此。然而，在此期间似乎没有发生任何事情。非常感谢任何有关让计时器推进幻灯片的指导!

<div align="center">
 <div class="slideViewer">
    <img class="slides" src="images/dragonborn.jpg" style="width:50%">
    <img class="slides" src="images/mountain.jpg" style="width:50%">
    <img class="slides" src="images/nords.jpg" style="width:50%">
    <img class="slides" src="images/dragon.jpg" style="width:50%">

    <button class="display-left" onclick="plusDivs(-1)">&#10094;</button>
    <button class="display-right" onclick="plusDivs(1)">&#10095;</button>
  </div>
</div>

<script>
var slideIndex = 1;
showDivs(slideIndex);

var timer = setInterval(plusDivs(1), 1000);


function plusDivs(n) {
    showDivs(slideIndex += n);
}

function showDivs(n) {
    var i;
    var x = document.getElementsByClassName("slides");
    if (n > x.length) {slideIndex = 1}    
    if (n < 1) {slideIndex = x.length}
    for (i = 0; i < x.length; i++) {
        x[i].style.display ="none"; 
    }
    x[slideIndex-1].style.display = "block";
}
</script>

Answer 1

您需要向 setInterval 传递一个函数——通过在您的代码中调用该函数，您传递的不是函数，而是单次调用的结果。相反，传递一个匿名函数，然后执行您想要发生的事情:

<div align="center">
 <div class="slideViewer">
    <img class="slides" src="images/dragonborn.jpg" style="width:50%">
    <img class="slides" src="images/mountain.jpg" style="width:50%">
    <img class="slides" src="images/nords.jpg" style="width:50%">
    <img class="slides" src="images/dragon.jpg" style="width:50%">

    <button class="display-left" onclick="plusDivs(-1)">&#10094;</button>
    <button class="display-right" onclick="plusDivs(1)">&#10095;</button>
  </div>
</div>

<script>
var slideIndex = 1;
showDivs(slideIndex);

var timer = setInterval(function () {
    plusDivs(1);
}, 1000);


function plusDivs(n) {
    showDivs(slideIndex += n);
}

function showDivs(n) {
    var i;
    var x = document.getElementsByClassName("slides");
    if (n > x.length) {slideIndex = 1}    
    if (n < 1) {slideIndex = x.length}
    for (i = 0; i < x.length; i++) {
        x[i].style.display ="none"; 
    }
    x[slideIndex-1].style.display = "block";
}
</script>