将上一个/下一个切换添加到 onclick 图像库

Question

我有几个 onclick 图像库，当用户单击图像时会加载下一个图像。这不是很明显，我想添加“下一个”和“上一个”切换。

我已经阅读了很多关于它的主题，但我对 javascript 不够熟悉，无法将一般建议应用于我的特定代码（我不完全理解）。

所以我想就如何编辑我的 javascript 函数获得具体建议。

这是函数：

 function ImageCollection(images) {
     this.images = images;
     this.i = 0;
     this.next = function(img) {
     this.i++;
     if (this.i == images.length)
         this.i = 0;
         img.src = images[this.i];
     }
 }

以图像数组为例：

var ic1 = new ImageCollection(['icono/antithese/preview.jpg','icono/antithese/preview2.jpg','icono/antithese/preview2.jpg',}

我在我的 html 中这样称呼：

<img src="icono/antithese/preview.jpg" onclick="ic1.next(this)" >

而且它只有一种方式，这对于 onclick 功能来说很好，但我仍然想学习如何在使用切换时让它来回切换。

感谢您的帮助和关注 （我希望我表达清楚了，如果不是请问我，我会尽量准确！）

Answer 1

function ImageCollection(images) {
     this.images = images;
     this.i = 0;
     this.next = function(imgId) {
     var img = document.getElementById(imgId);
     this.i++;
     if (this.i == images.length )
         this.i = 0;
         img.src = images[this.i];
     }
     this.prev = function(imgId) {
     var img = document.getElementById(imgId);
     this.i--;
     if (this.i <= 0)
         this.i = images.length -1;
         img.src = images[this.i];
     }
 }

那么你需要在图片持有者下方添加两个按钮。

<img id='container' src="icono/antithese/preview.jpg" >
<input type='button' value='next' onclick='ic1.next("container")' />
<input type='button' value='prev' onclick='ic1.prev("container")' />

现在，当您单击按钮时，它会向前或向后移动。

Here is a fiddle

---

您提到您不完全理解代码在做什么，所以我提供以下解释：

首先您要创建一个名为ImageCollection 的对象构造函数，它接受一个名为images 的参数。接下来，您将假定的图像“数组”分配给名为images 的该对象的成员。接下来，您将创建一个名为 i 的成员，以跟踪您当前在数组中的位置。

接下来的两个成员是名为next 和prev 的函数。这些函数采用单个参数，即图像容器的 id。

每个函数都做 4 件事：

1. 使用传入的 id 获取对容器对象的引用。
2. 增加/减少内部跟踪成员i。
3. 确保i的值在数组的范围内，也就是说i的位置会有一个元素。如果没有，这意味着您已经超过了数组的末尾或数组的开头，然后i 将被重置，以便它成为数组的结尾或开头，具体取决于您所在的方向旅行。
4. 将容器的源设置为图像数组中与i匹配的值。

现在，如果您想要真正花哨，您可以为其创建暂停播放功能，同时确保每个功能都停止自动播放。为此，请查看 'setTimeout' 和 'clearTimeout' javascript 函数。