TDCC Laboratory



「■画像を順次自動的に表示させたい」が閉じられましたが、消滅に偲び難く、参考資料となるページを無断でアーカイブで作成してみました。
もし、元の管理の方にご迷惑をお掛けすることになるならば、お知らせ下さいませ。 直ちに、お詫びして、削除いたします。
なお、使われていたイメージ画像は残っていませんでしたので、改めてこちらで用意しました。


「■画像を順次自動的に表示させたい」 より(アーカイブ版)

■画像を順次自動的に表示させたい



 スライドのように写真を順次自動的に表示させるにはどうしたらよいかを以下に示す。

暁子様のフランス旅行より

(2006年10月)


この方法のソースは以下の通りです。

(1)

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>


(2)

BodyタグにonLoadイベントの定義

ページがロードされたときにJavaScript関数(start())を呼び出すために、<body>タグ内に onLoad="start()" と指定する。
 

ソース <html>

<body onLoad="start()"・・・>


(3)

画像の表示

画像を表示させるところで、<img>タグを指定する。なお、表示する画像は name="myImg" により毎回変化する。
 

ソース <html>

<img src="images/a1.JPG" name="myImg">




Updated: 2020.09.22, edited by N. Yamamoto.
Revised on 17, May, 2023.