■画像を順次自動的に表示させたい
スライドのように写真を順次自動的に表示させるにはどうしたらよいかを以下に示す。
暁子様のフランス旅行より
（2006年10月）
|
|
この方法のソースは以下の通りです。
|
（１）
|
JavaScript関数の定義
<head>と</head>タグ内に、表示する画像を変化させるために使用する変数（ここではimgNum）と、その変数を判定して表示する画像を決定するためのJavaScript関数（ここではstart()）を定義する。
なお、setTimeout("start()",3000)の指定により、一つの画像の表示時間（単位：ミリセカンド）を指定する。
|
|
|
|
|
|
ソース ＜html＞
<SCRIPT LANGUAGE="JavaScript">
<!--
imgNum=1;
function start(){
if(imgNum==1){
document.myImg.src="SwitchingPictures.files/a1.JPG";
imgNum=2;
}else if(imgNum==2){
document.myImg.src="SwitchingPictures.files/a2.JPG";
imgNum=3;
}else if(imgNum==3){
document.myImg.src="SwitchingPictures.files/a3.JPG";
imgNum=4;
}else if(imgNum==4){
document.myImg.src="SwitchingPictures.files/a4.JPG";
imgNum=5;
}else if(imgNum==5){
document.myImg.src="SwitchingPictures.files/a5.JPG";
imgNum=6;
}else if(imgNum==6){
document.myImg.src="SwitchingPictures.files/a6.JPG";
imgNum=7;
}else if(imgNum==7){
document.myImg.src="SwitchingPictures.files/a7.JPG";
imgNum=8;
}else if(imgNum==8){
document.myImg.src="SwitchingPictures.files/a8.JPG";
imgNum=9;
}else if(imgNum==9){
document.myImg.src="SwitchingPictures.files/a9.JPG";
imgNum=10;
}else if(imgNum==10){
document.myImg.src="SwitchingPictures.files/a10.JPG";
imgNum=1
}
setTimeout("start()",3000);
}
//-->
</SCRIPT>
|
|
（２）
|
BodyタグにonLoadイベントの定義
ページがロードされたときにJavaScript関数（start()）を呼び出すために、<body>タグ内に onLoad="start()" と指定する。
|
|
|
ソース ＜html＞
<body onLoad="start()"･･･>
|
|
（３）
|
画像の表示
画像を表示させるところで、<img>タグを指定する。なお、表示する画像は name="myImg" により毎回変化する。
|
|
|
ソース ＜html＞
<img src="images/a1.JPG" name="myImg">
|
Updated: 2020.09.22, edited by N. Yamamoto.
Revised on 17, May, 2023.
|
