![](/img/trans.png)
[英]How to change background image every click in windows 8 javascript
[英]How to change the URL of an image tag on every click on the image using JavaScript?
我有一个元素在HTML页面上显示图像。 此元素的来源是JavaScript数组中许多不同图像之一。 我已经有一个用于循环浏览图像,创建幻灯片效果的脚本,但是现在我想使用按钮手动浏览图像。
到目前为止,这是我的代码,但是单击按钮时没有响应。
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];
}
}
谁能告诉我我的代码有什么问题或提出更好的方法?
您使用的方法存在多个问题。 看看下面的修改功能。 让我知道您是否需要任何解释。
以下代码将使用包含图像URL的数组,然后在单击时以顺序方式将其分配给img
标签。 请享用!
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();
我在您的代码中发现以下问题:
indexOf
而不指定必须在其中执行搜索的数组。 想象一下,学校的校长要某人去查找约翰是否在教室中,而没有指定特定的教室。 next
变量,如果需要无限循环,这可能是一个好主意。 但是在这里,由于我们仅限于10或20张图像,因此我们需要确保如果当前选择的图像是最后一张,我们会发现next
一张图像达到21张(假设总共有20张图像。),这将尝试访问变量超出范围。 因此,我使用了mod
运算符%
。 对于在JavaScript基准, 5%10
将返回5
, 15%10
将返回5
等。 在此处阅读有关mod
运算符的更多信息。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.