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

【问题标题】：How do I go through pictures (like a slide show) just by clicking a button?如何通过单击按钮浏览图片（如幻灯片放映）？
【发布时间】：2016-01-27 14:29:38
【问题描述】：

我正在学习使用 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>

【问题讨论】：

<center> 不是 HTML 元素，您不应该在现代代码中使用 onClick！除此之外，到目前为止，您还尝试了哪些方法来使 Forward 和 Back 功能正常工作？

标签： javascript html arrays button slideshow

【解决方案1】：

在你的代码之后添加这个，它可能会起作用，重点在于 setInterval() 的用法。按下按钮时出现错误，出现“Forward()”而不是“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;
  }
}

【讨论】：

在此上下文中，function() { Next(); } 与 Next 相同。

【解决方案2】：

如果我理解正确，您所要做的就是使用 setTimeout 为向前和向后创建两个函数。他们将执行循环你的功能下一个和回来。像这样：

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

附：最好用小写字母写函数名称。在大写中，它表示类。并且更好地使用动词。祝你好运:)

【讨论】：