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

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

本文关键字：幻灯片 浏览 何通过 单击 按钮      更新时间：2023-09-26

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

将此添加到代码之后，它可能会工作，重点是在setInterval（）用法中。你按下按钮时出错，你得到了"向前（）"而不是"向前（（）"。这是手册。我认为这样会奏效。

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

如果我理解正确的话，您所要做的就是使用setTimeout为forward和backward生成两个函数。它们将执行下一个和上一个循环您的函数。比如：

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

附言：最好用小写字母写出函数名。大写表示类。最好用动词。祝你好运：）

相关文章：