Question

我在w3学校教程之后创建了一个基本图库，用于手动幻灯片放映。我正在尝试使用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>

Answer 2

setInterval将第一个参数作为函数。通过使用双括号，您实际执行了plusDivs函数并将其返回值（未定义）传递给setInterval

相反，请尝试以下方法：

setInterval(function() { plusDivs(1); }, 1000);

或者，或者，修改plusDivs以便它不需要参数，然后直接传递plusDivs，如下所示：

setInterval(plusDivs, 1000):
function plusDivs(n) {
    n = n || 1; // Default value
    // ...
}

虽然我们正在使用它，但在声明之前使用函数通常不被视为一种好习惯。因此，您应该将plusDivs函数移到调用setInterval

之上

Answer 3

您需要将函数作为参数传递给 setInterval 。目前，您只需传递一次调用 plusDivs 的结果。

试试这个：

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

注意括号和箭头 - 它定义了每个间隔执行的匿名函数。

Answer 4

这是将参数传递给函数并返回函数

的方法

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

setInterval(plusDivs(1), 1000);

Javascript - 用于推进幻灯片放映的setInterval

4 个答案: