[英]How to change the URL of an image tag on every click on the image using JavaScript?
I have an element displaying an image on an HTML page. 我有一个元素在HTML页面上显示图像。 This element's source is one of many different images in a JavaScript array.
此元素的来源是JavaScript数组中许多不同图像之一。 I already have a script for looping through the images, creating a slideshow effect, but now I want to manually flick through the images with buttons.
我已经有一个用于循环浏览图像,创建幻灯片效果的脚本,但是现在我想使用按钮手动浏览图像。
This is my code so far, but I get no response when clicking the button. 到目前为止,这是我的代码,但是单击按钮时没有响应。
function nextup()
{
imgs = [];
imgs[0] = "/snakelane/assets/images/thumb/_1.jpg"; imgs[10] = "/snakelane/assets/images/thumb/_19.jpg";
imgs[1] = "/snakelane/assets/images/thumb/_2.jpg"; imgs[11] = "/snakelane/assets/images/thumb/_20.jpg";
imgs[2] = "/snakelane/assets/images/thumb/_3.jpg"; imgs[12] = "/snakelane/assets/images/thumb/_21.jpg";
imgs[3] = "/snakelane/assets/images/thumb/_4.jpg"; imgs[13] = "/snakelane/assets/images/thumb/_22.jpg";
imgs[4] = "/snakelane/assets/images/thumb/_5.jpg"; imgs[14] = "/snakelane/assets/images/thumb/_23.jpg";
imgs[5] = "/snakelane/assets/images/thumb/_6.jpg"; imgs[15] = "/snakelane/assets/images/thumb/_24.jpg";
imgs[6] = "/snakelane/assets/images/thumb/_7.jpg"; imgs[16] = "/snakelane/assets/images/thumb/_25.jpg";
imgs[7] = "/snakelane/assets/images/thumb/_8.jpg"; imgs[17] = "/snakelane/assets/images/thumb/_26.jpg";
imgs[8] = "/snakelane/assets/images/thumb/_9.jpg"; imgs[18] = "/snakelane/assets/images/thumb/_27.jpg";
imgs[9] = "/snakelane/assets/images/thumb/_32.jpg"; imgs[19] = "/snakelane/assets/images/thumb/_28.jpg";
var pic = document.getElementById("picbox");
for(i =0; i < imgs.length; i++) {
var current = indexOf(pic.src);
var next = Math.round(current + 1);
pic.src = imgs[next];
}
}
Can anyone tell me what's wrong with my code or suggest a better way? 谁能告诉我我的代码有什么问题或提出更好的方法?
Multiple problems in the approach you had used. 您使用的方法存在多个问题。 Have a look at the modified function below.
看看下面的修改功能。 Let me know if you need explanation with anything.
让我知道您是否需要任何解释。
The following code will use an array containing image URLs and later assign in a sequential manner to an img
tag on click. 以下代码将使用包含图像URL的数组,然后在单击时以顺序方式将其分配给
img
标签。 Enjoy! 请享用!
Here you can try to see the output. 在这里您可以尝试查看输出。
function nextup(){
//Initialized img array with 10 images, you can do it any way you want to.
var imgs = [];
for(i=0;i<10;i++){
imgs[i] = "http://lorempixel.com/output/cats-q-c-100-100-"+(i+1)+".jpg";
}
//Fetch the pic DOM element by ID
var pic = document.getElementById("picbox");
//Know what is position of currently assigned image in array.
var current = imgs.indexOf(pic.src);
var next = 0;
//Handle case if no image is present, the initial case.
if(current!=-1){
next = (current + 1)%(imgs.length);
}
//Assign the next src
pic.src = imgs[next];
}
//Scoped outside to call the function first time on load.
nextup();
I found the following problems in your code: 我在您的代码中发现以下问题:
indexOf
without specifying the array in which the search has to be performed. indexOf
而不指定必须在其中执行搜索的数组。 Imagine s school principal asking someone to go find if John is present in the classroom without specifying a specific classroom. next
variable which could have been a good idea if you needed an endless loop. next
变量,如果需要无限循环,这可能是一个好主意。 But here since we are limited to 10 or 20 images we need to make sure that if the currently selected image is the last one, we find that next
goes to 21 (assuming a total of 20 images.) and this would try to access a variable out of bounds. next
一张图像达到21张(假设总共有20张图像。),这将尝试访问变量超出范围。 Hence I've used the mod
operator %
. 因此,我使用了
mod
运算符%
。 For reference in JavaScript, 5%10
would return 5
, 15%10
would return 5
and so on. 对于在JavaScript基准,
5%10
将返回5
, 15%10
将返回5
等。 Read more about the mod
operator HERE . 在此处阅读有关
mod
运算符的更多信息。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.