【IE6】【IE7】
写真のワイプ効果付きスライドショー
1.実行方法

 (1)HTMLファイルを開くと左図のような枠付きの大写真を表示します
   ・表示される写真はjsファイルにJPGファイルリストを記述
 (2)大写真を「開始」「前の写真」「次の写真」「停止」(下図参照)で制御します
 (3)初期はリストの写真表示で「開示」スライドショーをスタート



  このボタンは表示枠の上側にあります

 (4)間隔指定の選択リストから実行間隔指定(デフォルトは4秒間隔)
 (5)ワイプ指定の選択リストから好みのワイプ形式を指定(デフォルトはワイプ効果なし)



このスライドショーのサンプルは「 土手の上の花壇 2009年版スライドショー 」を実行で見えます。
2.作成方法&ソース説明
2-1 表示する写真の保存場所を記載の一覧表を作成
 (1)下記が一覧表jsファイルの例です
 (2)配列photo[**]は写真のファイル名を指定(別フォルダの場合はパス名も記入のこと)
 (3)配列phw[**]は縦写真は"t"、横写真は"y"を指定
 (4)配列phm[**]はコメントを記入
-------------------------------------------------------------------
photo=new Array();var pn=1;
phw=new Array();var wn=1;
phm=new Array();var mc=1;

// **************** 以下に表示の写真を指定 ***************
 = "d01-01.jpg";  phw[wn++] = "y"; phm[mc++] = "ヒナゲシ-1";
photo[pn++] = "d01-02.jpg";  phw[wn++] = "y"; phm[mc++] = "ヒナゲシ-2";
photo[pn++] = "d01-03.jpg";  phw[wn++] = "y"; phm[mc++] = "花菱草";
photo[pn++] = "d01-04.jpg";  phw[wn++] = "y"; phm[mc++] = "かすみ草";
photo[pn++] = "d01-05.jpg";  phw[wn++] = "y";  phm[mc++] = "矢車草";

---------------------------------------------------------------------
jsファイルの読み込みは以下です
<SCRIPT Language='JavaScript' src='dai1.js'></SCRIPT>

2-2 制御用メインのHTMLファイル
  ソースの主な内容を以下に説明します。
(1) 表示する写真のサイズを指定
  HTMLタグを書き換え1箇所とスクリプト2箇所で指定します。
	if (phw[pht]=="y"){
		document.images["daiph"].width="640";;
		document.images["daiph"].height="426"
	 }
	else{
		document.images["daiph"].width="426";;
		document.images["daiph"].height="640"

<IMG src="aa.jpg" NAME="daiph" width="640" height="426" border="10" style="border-style: ridge; border-color: #808080">

(2) ワイプ効果の指定と写真表示
 ・ワイプ効果はIE6 IE7で動作を確認しまた(他のアプリでは多分機能しません)
 ・指定した番号はwaipuに入っています(特定の番号に固定の場合は数値に変える)
 ・写真表示は「document.images["daiph"].src=photo[*]」で実行
f (waipu != 99){
document.images["daiph"].style.filter="reveaLTrans(duration=watime,transition=" + waipu +")";
document.images["daiph"].filters.reveaLTrans.Apply();
}

	document.images["daiph"].src=photo[pht];

if (waipu != 99){
 document.images["daiph"].filters.reveaLTrans.Play();
}
	Myfm.txt1.value= " [" + pht + "/" + suu + "]  " + phm[pht];

(3) 実行間隔の指定
 ・指定した間隔時間は変数「tims」に入っています(2000で2秒)
 ・タイマーの設定は「zikan=setInterval("tugi();",tims);」で実行
	tim=tt.options[tt.selectedIndex].value;
	if(tim==0) tims=2000;
	if(tim==1) tims=4000;
	if(tim==2) tims=6000;
	if(tim==3) tims=8000;
	if(tim==4) tims=12000;
	if(tim==5) tims=15000;
        kaisi();

zikan=setInterval("tugi();",tims);

3 サンプルファイルのダウンロード
ここでは「土手の上の花壇 2009年版スライドショー」を参考に説明しましたが、何方も簡単にこの表示が出来るように使用したサンプルファイル をまとめてダウンロードできるようにしました。

写真を一覧表示しクリックで拡大表示の サンプルファイルダウンロード
圧縮ファイル名:phot3.zip
解凍でフォルダ内に、dai1.js(2-1で説明)、dai3.html(2-2で説明)、があります

【HOME】  【実用編へ戻る】