我正在创建一个图像库,其缩略图类似于http://coolcarousels.frebsite.nl/c/28/.我有它正常工作,但我希望使用for循环缩短我的JavaScript代码,因为我将使用25张图片.
我的HTML代码中有以下摘录:
从我的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,...提前感谢!
不,您不必声明多个功能.一个没关系:
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)">