画像を切り替える

(なぜマイケルかと言うことはそのうちわかるのだ)

JavaScriptの効かない方は、こちらをどうぞ。 写真

画像の切り替えは gifアニメ でも切り替えられますが gifアニメはどちらかと言うと簡単な画像の切り替えに使われます。
ただし写真など大きいサイズの物は写真を合成して一つのファイルにする為、 ファイルそのものが大きくなりすぎて不向きです。

大きいサイズの画像の切り替えは通常「Java Script」と言うプログラムを使用します。
ここでは簡単に画像を切り替えることが出来るサンプルプログラムを 作ってみます。

ボタンでスタートストップする機能も付けてみます。

先ず下の青い部分をコピーして自分のブログに貼り付けて 「実際の表示をプレビュー」してみて下さい。
画像が切り替わったら成功です。

次に画像を自分の画像に差し替えます。
画像はhttp:～.jpgまででこのプログラムは９枚の画像が切り替わります。
画像の枚数の制限はありませんので減らしたり増やしたりして下さい。

ただし画像は「,」で区切られていますので注意してください。
最後の画像には「,」は付きませんので。
画像1,画像2,画像3
といった具合です、サンプルは一つの 画像の後改行していますが改行はしてもしなくても関係ありません。

「var t = 1000;」数字を変えると時間が変わります、単位は 1/1000秒です、「var t = 2000;」とすると２秒に一回切り替わります。

太字の部分に最初に表示される画像を入れます。
「width="300px"」を変えると画像の大きさを変えることが 出来ます
widthを指定しない場合はオリジナルの大きさになります。

「var flg = true;」の代わりに「 var flg = false;」とするとボタンを 押した時に切り替えが始まります。

ボタンが要らない場合は
の部分を削除します。

<script type="text/javascript">
<!--
var photo = new Array(
"http://www.naganoblog.jp/usr/kotanero/animen01.jpg",
"http://www.naganoblog.jp/usr/kotanero/animen02.jpg",
"http://www.naganoblog.jp/usr/kotanero/animen03.jpg",
"http://www.naganoblog.jp/usr/kotanero/animen04.jpg", 
"http://www.naganoblog.jp/usr/kotanero/animen05.jpg", 
"http://www.naganoblog.jp/usr/kotanero/animen06.jpg",
"http://www.naganoblog.jp/usr/kotanero/animen07.jpg",
"http://www.naganoblog.jp/usr/kotanero/animen08.jpg",
"http://www.naganoblog.jp/usr/kotanero/animen09.jpg"
　);
var i = 0;
var t = 1000;   //切り替え時間の設定です単位は1/1000秒です
var flg = true;	 
function timerImg ()
{
if (document.images['img1'].complete && flg)
　　{
　　　　i++; 
　　　　if ( i  >=  photo.length ) i = 0;
　　　　document.images['img1'].src = photo[i];
　　}
　　setTimeout("timerImg()", t);　
}
setTimeout('timerImg()', t);//一回目はここが呼び出される。
//-->
 </script>
	
<!--最初の画像はここに入れる-->
<img name="img1" 
src="http://www.naganoblog.jp/usr/kotanero/animen01.jpg" 
width="300px">
	
<br>
<input type="button" value = "スタート/ストップ" 
onClick = "flg =  !flg;">

グット・ラック