如何通过单击按钮浏览图片（如幻灯片）？

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

如果我没理解错的话，你所要做的就是在它们上面设置向前和向后的两个函数。他们将在前后循环执行您的功能。像这样：

function forward() {
    Next();
    setTimeout(forward, 1000);
}
function backwards() {
    Back();
    setTimeout(backwards, 1000);
}

P.S。最好用小写字母写函数名。大写表示类。最好使用动词。祝你好运:)

Answer 2

在您的代码之后添加这个，它可能会起作用，关键在于 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);
}

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

您应该将 "Back()" 函数（因为没有加载零。）更改为：

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

如何通过单击按钮浏览图片（如幻灯片）？

How do I go through pictures (like a slide show) just by clicking a button?

html

javascript

arrays

button

slideshow