Question

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

我已经阅读过很多关于它的帖子，但是我对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的参数。接下来，您将分配假定的数组＆＃39;将图像添加到名为images的对象的成员中。接下来，您将创建一个名为i的成员，以跟踪您当前所在阵列中的位置。

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

这些功能中的每一个都做了4件事：

使用传入的id。
增加/减少内部跟踪成员i。
确保i的值将落在数组的范围内，也就是说位置i上会有一个元素。如果没有，意味着你已经超过了数组的末尾或者在数组开始之前，那么i被重置，以便它将是数组的结束或开始，具体取决于你旅行的方向。
将容器的来源设置为图像数组中与i匹配的值。

现在，如果你想真正想要它，你可以为它做一个暂停播放功能，同时确保每个功能都停止自动播放。要做到这一点，请查看＆＃39; setTimeout＆＃39;和＆＃39; clearTimeout＆＃39; javascript函数。

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

1 个答案: