[英]add prev/next toggles to onclick image gallery
I have several onclick image galleries, where the next image loads when the user clicks on the image. 我有几个onclick图像库,当用户单击图像时,将在其中加载下一个图像。 It's not very obvious as is and I would like to add "next" and "prev" toggles.
它不是很明显,我想添加“ next”和“ prev”切换。
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). 我已经阅读了很多有关该主题的主题,但是我对javascript不够熟悉,无法将一般性建议应用于我的特定代码(我不完全了解)。
So I was hopping to get specific advice on how to edit my javascript function. 因此,我希望获得有关如何编辑javascript函数的具体建议。
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: 我在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. 同样,它只有一种方式,这对onclick函数很好,但是我仍然想学习如何在使用切换开关时使其来回移动。
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. 现在,当您单击按钮时,它将向前或向后移动。
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
. 首先,您将创建一个名为
ImageCollection
的对象构造ImageCollection
,该构造函数接受一个名为images
的参数。 Next you are assigning the assumed 'array' of images to a member of that object named images
. 接下来,您将假定的图像“数组”分配给名为
images
对象的成员。 Next you are creating a member named i
to keep track of the place in the array that you currently are. 接下来,您将创建一个名为
i
的成员,以跟踪当前数组中的位置。
The next two members are functions named next
and prev
. 接下来的两个成员是名为
next
和prev
函数。 These functions take a single parameter that is the id of a container for the images. 这些函数采用一个参数,该参数是图像容器的ID。
Each of these functions does 4 things: 这些功能中的每一个都执行4件事:
i
. i
。 i
will fall in the range of the array, that is to say there will be an element at position i
. i
的值落在数组的范围内,也就是说,在位置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. i
,以便根据行进的方向将其作为数组的末尾或开始。 i
. 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.
为此,请查看“ setTimeout”和“ clearTimeout” javascript函数。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.