ボタンをクリックして画像を入れ替える

ソース

<HTML>
<HEAD>
<SCRIPT Language="JavaScript">
<!--
var picNum=1;
var imgvalue=3;	//画像数
var imgPath=Array(imgvalue);

for (var i=0; i<imgvalue ; i++) {
imgPath[i]=new Image();
}
/*画像を増やす場合は、変数「imgvalue」の値を変更して、「imgPath」に画像のパスを足していく*/
imgPath[0].src = "images/sample03.jpg";
imgPath[1].src = "images/sample04.jpg";
imgPath[2].src = "images/sample05.jpg";

function changePic(picCount) {
  picNum+=parseFloat(picCount);
  if(picNum==0) {
    picNum+=1;
  } else if(picNum>imgvalue) {
    picNum-=1;
  } else {
    document.MainPic.src=imgPath[(picNum-1)].src;
  }
}

-->
</SCRIPT>
</HEAD>
<BODY>
<TABLE>
  <TR>
    <TD COLSPAN="2">
      <IMG SRC="images/sample03.jpg" ALT="豊平町　雪の写真" NAME="MainPic">
    </TD>
  </TR>
  <TR>
    <TD>
      <INPUT TYPE="button" VALUE="BACK" onClick="changePic('-1')">
    </TD>
    <TD>
      <INPUT TYPE="button" VALUE="NEXT" onClick="changePic('1')">
    </TD>
  </TR>
</TABLE>
</BODY>
</HTML>

ポイントは、<IMG>タグに名前を付けて、ボタンをクリックするごとにSRC属性によって画像を入れ替えているところです。
これといって、言うことはありませんが、画像を増やす場合、変数の「imgvalue」に表示したい画像数を入れます。
あとは、imgPathで画像のパスを増やしていけば、簡単に画像追加が出来ます。

サンプル

▲BACK

IT SOHO CLUB