Объявление нескольких функций в цикле for

Question

Я создаю галерею изображений с миниатюрами, подобными этому http://coolcarousels.frebsite.nl/c/28/. Я работаю правильно, но я ищу, чтобы сократить код javascript, используя цикл for, поскольку я буду работать с 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()"> 

и от моего яваскрипта кода:

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]; 
    } 
} 

Но, к сожалению, я не могу заставить это работать. У меня есть чувство, что я могу неправильно объявлять функции с помощью функции 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.