Question

我正在创建一个图像库，其缩略图类似于此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()">

并从我的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个不同的函数，但由于它们都执行类似的角色，我想使用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，...提前感谢！

Answer 1

不，您不必声明多个功能。一个人没问题：

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

Answer 2

删除for循环，只声明一次function changeImage(d) {}，然后在d处理程序中传递onclick。

在for循环中声明多个函数

2 个答案: