ボタンを押すと画像が入れかわる(3ボタン)




NEXTボタンを押すと次の画像が表示されます。全部表示すると最初の画像に戻ります。

TOPボタンで最初の画像が表示され、BACKボタンでひとつずつ戻ります。

テキストボックスには、現在表示されている画像が何番目か表示されます。

ソース
<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
<!--
Img=new Array();
Img[1]="images/test1.gif";
Img[2]="images/test2.gif";
Img[3]="images/test3.gif";
Img[4]="images/test4.gif";
Img[5]="images/test5.gif";
cnt=1;
function NextIMG(flag){
if(flag=='next'){
cnt++;
document.MyIMG.src=Img[cnt];
document.FI.TI.value=''+cnt+'/5';
if(cnt>5){
document.MyIMG.src=Img[1];
document.FI.TI.value='1/5';
cnt=1;
}
}else if(flag=='back'){
if(cnt>1){
cnt--;
document.MyIMG.src=Img[cnt];
document.FI.TI.value=''+cnt+'/5';
}
}else if(flag=='top'){
document.MyIMG.src=Img[1];
document.FI.TI.value='1/5';
cnt=1;
}
}
//-->
</SCRIPT>
</head>
<body onload="NextIMG('top')">
<center>
<img name="MyIMG" src="images/test1.gif" border="0" width="200" height="150">
<br><br>
<FORM name="FI">
<INPUT type="text" name="TI" size="5" value="1/10" style="text-align:center">
<br><br>
<INPUT type="button" value="BACK" onClick="NextIMG('back')">
<INPUT type="button" value="TOP" onClick="NextIMG('top')"> 
<INPUT type="button" value="NEXT" onClick="NextIMG('next')"> 
</FORM>
</center>
</body>
</html>
JavaScript GarageのTopへ戻る