表示する画像を何秒かでかえてみよう
表示の例
 3秒ごとに5つの画像がくりかえし表示されます。
プログラムAのソースをコピーして、画像を表示させたい場所のHTMLソースのBODY区間に貼り付けしましょう。
プログラムAのソース
<SCRIPT LANGUAGE="JavaScript">
<!--
mySrc=new Array("images/icons1.gif","images/icons2.gif","images/icons3.gif","images/icons4.gif","images/icons5.gif");
n=0;
function Gazou2(){
document.myimages.src=mySrc[n];
n++;
if(n==5){n=0}
setTimeout("Gazou2()",3000);
}
//-->
</SCRIPT>
<img name="myimages" src="images/icons1.gif" border="0" width="32" height="32">
プログラムAのソースのいちばん下の行の src="images/icons1.gif" の images/icons1.gif がページが開いた時に表示されたパンダの画像ファイル名になっていますから、あなたがまず最初に表示したい画像のファイル名にかえてください。
この images/icons1.gif は大きさが、よこ32ピクセル、たて32ピクセルの画像ですから、width="32" height="32" となっています。この 32  32 は、あなたの選んだ画像の大きさにかえてくださいね。
画像の大きさは、できるだけ同じがいいと思います。すべての画像は、この部分で指定した画像の大きさで表示されます。
3行目の "images/icons1.gif","images/icons2.gif","images/icons3.gif","images/icons4.gif",
"images/icons5.gif"
 が5つの画像のファイル名になっています。1番目は最初に表示したい画像のファイル名(プログラムAでは images/icons1.gif )にして、その他をあなたの表示させたい画像のファイル名にかえてください。
プログラムAでは、表示する画像を5つに設定していますので、下から6行目の if(n==5){n=0} の所が 5 となっています。あなたの表示させたい画像がなら if(n==3){n=0} にしてください。
表示する時間の間隔(秒数)は、下から5行目の setTimeout("Gazou2()",3000) の部分で秒なら 3000 秒なら 5000 にしてください。
プログラムBのソースをコピーして、HTMLソースの<body の y のすぐうしろに半角スペースをひとつ入力してから貼り付けしましょう。
プログラムBのソース
onload="Gazou2()"
ソースの文字をかえる時に、" や ; を消してしまわないようにしてください。
5・6年生にもわかるやさしいJavaScriptのTOPへ