javascript - 如何通过单击按钮浏览图片(如幻灯片)？

Question

我正在学习使用 HTML、CSS 和 Javascript，但我无法让这段代码工作。我正在制作幻灯片页面，您可以在其中使用按钮浏览幻灯片。

我了解如何使用数组移动到下一张图片以及如何返回一张图片。但是我应该如何编码前进、后退和暂停按钮呢？ (向前和向后应该使幻灯片在一个方向上每 1 秒变化一次)。如果您想知道，我有一个 0.jpg 作为填充。

到目前为止，这是我的代码:

var count = 0;

var pics = ["0.jpg", "1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg"];
var arrayLength = pics.length;

function slideshow() {

  count++;
  if (count > arrayLength - 1) {
    count = 1;
  }

  document.getElementById('num').src = pics[count];

}

function Next() {
  count++;
  if (count > arrayLength - 1) {
    count = 1;
  }
  document.getElementById('num').src = pics[count];
}

function Back() {
  count--;
  if (count < 1) {
    count = arrayLength - 1;
  }
  document.getElementById('num').src = pics[count];
}

<center>
  <h1>Slide Show</h1>
</center>

<center>
  <img id="num" src="0.jpg">
</center>

<center>
  <input type="button" name=btnBackward value="Backward" onClick="Backward()" />
  <input type="button" name=btnBack value="Back" onClick="Back()" />
  <input type="button" name=btnPause value="Pause" onClick="Pause()" />
  <input type="button" name=btnNext value="Next" onClick="Next()" />
  <input type="button" name=btnFoward value="Foward" onClick="Foward()" />
</center>

Answer 1

在您的代码之后添加它，它可能会起作用，关键在于 setInterval() 用法。你按下按钮时出错，你到达那里是“Foward()”而不是“Forward()”。 Here是手册。我认为它会以这种方式工作。

var interval = 0;
function Pause() {
 if (interval!=0) {
  clearInterval(interval);
  interval = 0;
 } 
}

function Forward() {
 Pause();
  interval = setInterval( function() { Next() }, 2000);
}

function Backward() {
 Pause();
  interval = setInterval( function() { Back() }, 2000);
}

请使用首字母小写的函数名，因为它们是类名。

您应该将“Back()”函数(因为没有加载零)更改为:

function Back() {
  count--;
  document.getElementById('num').src = pics[count];
  if (count < 1) {
    count = arrayLength - 1;
  }
}