我正在创建一个包含与此相似的缩略图的图片库 http://coolcarousels.frebsite.nl/c/28/ .我让它正常工作,但我希望使用 for 循环缩短我的 javascript 代码,因为我将处理 25 张图片。
我的 HTML 代码中有以下摘录:
<!-- thumbnail images -->
<img src="thumbs/Taj Mahal_thumb.jpg" onclick="changeImage0()">
<img src="thumbs/India01_thumb.jpg" onclick="changeImage1()">
<img src="thumbs/India02_thumb.jpg" onclick="changeImage2()">
<img src="thumbs/India03_thumb.jpg" onclick="changeImage3()">
<img src="thumbs/India04_thumb.jpg" onclick="changeImage4()">
<img src="thumbs/India05_thumb.jpg" onclick="changeImage5()">
来 self 的 javascript 代码:
var imgNumber = 0;
var NumberOfImages = 6-1; //-1 because array members starts from 0
//Images
var img = new Array(NumberOfImages);
img[0] = "images/Taj Mahal.jpg";
img[1] = "images/India01.jpg";
img[2] = "images/India02.jpg";
img[3] = "images/India03.jpg";
img[4] = "images/India04.jpg";
img[5] = "images/India05.jpg";
//Captions
var imgcap = new Array(NumberOfImages);
imgcap[0] = "Taj Mahal, Agra";
imgcap[1] = "Driving through Delhi";
imgcap[2] = "India Gate, Delhi";
imgcap[3] = "Lotus Temple, Delhi";
imgcap[4] = "Monkeys fighting in the streets of Delhi!";
imgcap[5] = "Old Delhi";
function changeImage0()
{
x=document.getElementById('myimage')
imgNumber=0;
x.src=img[imgNumber];
x=document.getElementById("cap");
x.innerHTML=imgcap[imgNumber];
}
function changeImage1()
{
x=document.getElementById('myimage')
imgNumber=1;
x.src=img[imgNumber];
x=document.getElementById("cap");
x.innerHTML=imgcap[imgNumber];
}
function changeImage2()
{
x=document.getElementById('myimage')
imgNumber=2;
x.src=img[imgNumber];
x=document.getElementById("cap");
x.innerHTML=imgcap[imgNumber];
}
function changeImage3()
{
x=document.getElementById('myimage')
imgNumber=3;
x.src=img[imgNumber];
x=document.getElementById("cap");
x.innerHTML=imgcap[imgNumber];
}
function changeImage4()
{
x=document.getElementById('myimage')
imgNumber=4;
x.src=img[imgNumber];
x=document.getElementById("cap");
x.innerHTML=imgcap[imgNumber];
}
function changeImage5()
{
x=document.getElementById('myimage')
imgNumber=5;
x.src=img[imgNumber];
x=document.getElementById("cap");
x.innerHTML=imgcap[imgNumber];
}
如您所见,我希望用 6 个不同的名称声明 6 个不同的函数,但由于它们都执行相似的 Angular 色,所以我想使用 for 循环本身来执行此声明
for(var d=0;d<=NumberOfImages;d++)
{
function changeImage(d)
{
x=document.getElementById('myimage');
imgNumber=d
x.src=img[imgNumber];
x=document.getElementById("cap");
x.innerHTML=imgcap[imgNumber];
}
}
但不幸的是我无法让它工作。我有一种感觉,我可能使用“function changeImage(d)”错误地声明了函数。这是错误的吗?关于如何创建将创建我的函数的循环的任何想法:changeImage0、changeImage1、changeImage2、...提前致谢!
最佳答案
不,您不必声明多个函数。一个就好了:
function changeImage(d)
{
x = document.getElementById('myimage');
imgNumber = d;
x.src = img[imgNumber];
x = document.getElementById("cap");
x.innerHTML = imgcap[imgNumber];
}
或者更好:
function changeImage(d)
{
document.getElementById('myimage').src = img[d];
document.getElementById("cap").innerHTML = imgcap[d];
}
然后像这样使用它:
<img src="thumbs/Taj Mahal_thumb.jpg" onclick="changeImage(0)">
<img src="thumbs/India01_thumb.jpg" onclick="changeImage(1)">
<img src="thumbs/India02_thumb.jpg" onclick="changeImage(2)">
<img src="thumbs/India03_thumb.jpg" onclick="changeImage(3)">
<img src="thumbs/India04_thumb.jpg" onclick="changeImage(4)">
关于javascript - 在 for 循环中声明多个函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20914403/