加preV /下一个切换到的onclick图库 [英] add prev/next toggles to onclick image gallery

问题描述

我有几个的onclick图像画廊，在那里当用户点击图片上的下一个图像加载。因为是我想补充的下一个和preV切换这不是很明显。

我看了很多关于它的线程，但我不能用JavaScript足够熟悉适用一般建议到我的特殊code（我不完全理解）。

所以我跳槽来获得关于如何编辑我的javascript函数的具体建议。

这是函数：

 函数ImageCollection（图像）{
     this.images =图像;
     this.i = 0;
     this.next =功能（IMG）{
     this.i ++;
     如果（this.i == images.length）
         this.i = 0;
         img.src =图像[this.i]
     }
 }
 

与图像阵列的示例：

  VAR IC1 =新ImageCollection(['icono/antithese/$p$pview.jpg','icono/antithese/$p$pview2.jpg','icono/antithese/$p$pview2.jpg',}
 

这是我称之为像这样我的html：

＆LT; IMG SRC =ICONO / antithese / preview.jpg的onclick =ic1.next（本）＆GT;

此外那就只一条路，这是罚款的onclick功能，但我还是想学习如何让它来回用时切换

感谢您的帮助和关注
（我希望我的措辞这显然，如果没有请问我，我会尽量多precise！）

解决方案

 函数ImageCollection（图像）{
     this.images =图像;
     this.i = 0;
     this.next =功能（imgId）{
     VAR IMG =的document.getElementById（imgId）;
     this.i ++;
     如果（this.i == images.length）
         this.i = 0;
         img.src =图像[this.i]
     }
     这一点。preV =功能（imgId）{
     VAR IMG =的document.getElementById（imgId）;
     this.i--;
     如果（this.i＆下; = 0）
         this.i = images.length -1;
         img.src =图像[this.i]
     }
 }
 

然后，你需要的图像载体下方添加两个按钮。

 ＆LT; IMG ID =容器SRC =ICONO / antithese / preview.jpg＆GT;
＆LT;输入类型=按钮值='下一步'的onclick ='ic1.next（容器）'/＆GT;
＆LT;输入类型=按钮值='preV的onclick ='IC1 preV（容器）'/＆GT;
 

现在，当您点击按钮就会向前或向后移动。

这里是一个小提琴

---

您提到你不完全明白什么是code在做，所以我提供了这样的解释：

首先要创建 ImageCollection 名为对象的构造函数，它接受一个命名的参数图片。接下来，您要分配图像的假定数组到名为图像该对象的成员。接下来，您要创建一个名为成员 I 来跟踪你目前在数组中的地方。

接下来的两个成员是命名函数接下来和 $ P $光伏。这些功能需要一个参数，它是图像的容器的id。

这些函数做4件事：

1. 获取使用ID传递到容器对象的引用。


2. 递增/递减内部跟踪成员 I 。


3. 确保该值 I 将下降数组的范围，也就是说会有在位置的元素我。如果不会，这意味着你已过了数组的结束或阵列开始之前，那么 I 复位，因此，这将是任何一个结束或阵列的开始，这取决于你的方向旅行。


4. 设置容器的源头匹配 I 。
图像阵列中的价值

现在，如果你想获得真正看中你可以做的，也确保每个功能的暂停播放功能停止自动播放。要做到这一点的面貌迈向'setTimeout的'和'clearTimeoutJavaScript函数。

I have several onclick image galleries, where the next image loads when the user clicks on the image. It's not very obvious as is and I would like to add "next" and "prev" toggles.

I have read many threads about it but I am not familiar enough with javascript to apply general advice to my specific code (which I don't fully understand).

So I was hopping to get specific advice on how to edit my javascript function.

this is the function:

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

with an example of image array:

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

that I call like this in my html:

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

Also it only goes one way, which is fine for the onclick function, but I would still like to learn how to make it go back and forth when using the toggles.

Thank you for your help and attention (I hope I phrased this clearly, if not please ask me and I'll try to be more precise!)

解决方案

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

Then you need to add two buttons below the image holder.

<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")' />

Now when you click the buttons it will move forward or backward.

Here is a fiddle

---

You mentioned you don't fully understand what the code is doing so I offer this explanation:

First you are creating an object constructor named ImageCollection which takes a parameter named images. Next you are assigning the assumed 'array' of images to a member of that object named images. Next you are creating a member named i to keep track of the place in the array that you currently are.

The next two members are functions named next and prev. These functions take a single parameter that is the id of a container for the images.

Each of these functions does 4 things:

1. Get a reference to the container object using the passed in id.
2. Increments/Decrements the internal tracking member i.
3. Makes sure that the value of i will fall in the range of the array, that is to say there will be an element at position i. If there won't be, meaning you have gone past the end of the array or before the beginning of the array, then i is reset so that it will be either the end or beginning of the array depending on which direction you are traveling.
4. Sets the source of the container to the value in the image array that matches i.

Now if you wanted to get really fancy you could make a pause play functionality for it also ensuring each function stops the automatic play. To do this look into the 'setTimeout' and 'clearTimeout' javascript functions.

这篇关于加preV /下一个切换到的onclick图库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！