Question

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

我考虑如何使用数组移动到下一个图像以及如何返回到下一个图像。但是我该如何编写前进，后退和暂停按钮？（向前和向后应该使滑动在一个方向上每1秒更换一次）。如果你想知道，我有一个0.jpg就像填充物一样。

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

＆＃13;

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];
}

＆＃13;

<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>

＆＃13;

Answer 1

在您的代码之后添加此代码，它可能会起作用，这一点在setInterval（）用法中。按下按钮时出错，你到达那里＆＃34; Foward（）＆＃34;而不是＆＃34;前进（）＆＃34;。 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);
}

请使用小写第一个字符的函数名，因为它们是类名。

你应该改变你的＆＃34; Back（）＆＃34;函数（因为零不加载。）到：

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

Answer 2

如果我理解正确，你所要做的就是使用setTimeout为前向和后向制作两个函数。并且他们将执行循环您的功能。像那样：

Logged messages:

<div id="log">
</div>

P.S。最好用小写字母写下函数名。在大写字母中它表示类。最好使用动词。祝你好运：）

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

2 个答案: