徐々に表示・消滅するスライドショー(コメント付き)の JavaScript
戻 る

北アルプスの風景


スライドショーの特徴
・ 一定の時間毎に、画像が徐々に表示・消滅するスライドショーです。
・ 画像に対応したコメントが表示できます。
・ 「開始」ボタンでスライドが始まり、「停止」ボタンで止まります。
・ 数値の設定だけで、画像表示が調整出来ます。
設定方法
まず、「ソースファイル」を、指示に従いコピーアンドペーストします。

(1)「表示をデザインする」の部分で、色に合わせて、次の設定をします。

 ■ タイトル名を入れてください。
 ■ タイトル文字の文字の大きさ書体を、好みで変えてください。
 ■ タイトル名に代わり <img src="画像ファイル"> で画像も使えます。
 ■ スライドショー本体の、額縁の種類、額縁の色を、好みで変えてください。
    ※ 本項目の設定内容は、リンク先参照。  額縁の太さのみ「入力事項」で指定します。
 ■ コメントの、額縁の種類、額縁の太さ、額縁の色を、好みで変えてください。
    ※ 本項目の設定内容は、リンク先参照
 ■ コメントの、文字の大きさ書体背景色を、好みで変えてください。
 ■ その他の設定がわかる方は、好みに合わせて指定を変更してください。

<!-- ******************** 表示をデザインする ********************** -->
<!-- タイトル -->
<span id="ttle" style="position:absolute;font:bold 15pt MS ゴシック; color:#609060">
  北アルプスの風景</span><br><br>
<!-- スライド本体 -->
<div id="gakubuti" style="position:absolute; border:outset #80d080; z-index:2;
  background-color:#ffffff"></div>
<div id="slide" style="position:absolute; z-index:3; filter:alpha();"></div>
<!-- コメント -->
<span id="comm" style="position:absolute; border:inset 1.5 #a0a080; font:11pt MS ゴシック;
  padding:5; background-color:#ddffdd"></span><br>
<!-- スイッチ -->
<span id="swit" style="position:absolute;"></span>
<!-- ************************* ここまで *************************** -->


(2)「入力事項」の部分で、色に合わせて、次の設定をします。 太字は入力可能場所。

 ■ 「0」から順にスライドする画像を、アドレスを含むファイル名で指定します。
 ■ 画像に対応したコメントを、画像ファイルの右側に記入します。
 ■ スライドショーの位置を、左からの間隔上からの間隔で指定します。
 ■ 画面の表示幅は必ず入力してください。
 ■ 画面の高さの指定が「0」の場合、1枚目の画像の縦横比で決定されます。
 ■ 本体の額縁の太さを指定します。
 ■ 開始スイッチの画像が「0」ならば、停止スイッチの画像の指定は無効です。
 ■ 画像が徐々変化する速さを、好みに合わせ指定します。
 ■ その他、必要に応じて、指示に従い設定してください。

// ***************************  入力事項  *****************************
// ======= 入力1:スライド画像の設定 =======
// 出したい画像の種類を必要数だけ表示順に入力(0から順に)
// 右側は、その写真に対するコメントを入れてください
// 注意!! 画像(写真)の縦と横の比は一定に加工しておいて下さい
ugoku[ 0 ]=new Array("../parts/sinho0.jpg", "ハード斜面のビッグバーン");
ugoku[ 1 ]=new Array("../parts/sinho1.jpg", "岐阜県最高峰の笠岳");
ugoku[ 2 ]=new Array("../parts/sinho2.jpg", "山容の美しい西穂高岳");
ugoku[ 3 ]=new Array("../parts/sinho3.jpg", "北アルプスの拠点 西穂山荘");
ugoku[ 4 ]=new Array("../parts/sinho4.jpg", "大正池を作った焼岳");
// ======= 入力2:位置等の設定 =======
var xx = 90;               //スライドショー左端までの間隔(ピクセル)
var yy = 60;               //スライドショー上端までの間隔(ピクセル)
var pitch = 3.0;           // スライドする間隔(秒)(初期値 3.0)
var haba = 400;            // 表示する幅(ピクセル)(初期値 400)
var taka =0;               // 表示する高さ(ピクセル) 0ならば自動設定
var waku = 15;             // 額縁の厚さ(ピクセル)(初期値 15)
var str = "0";     // スライド開始スイッチの画像 「0」ならばボタン選択
var stp ="../parts/stp.gif";  // スライド停止スイッチの画像
// ======= 入力3:表示・消滅の速さの調整 =======
var ed=  70;   // 画像の表示が変化する時間で、大きいほど長い(初期値 100)
var nw= 0.10;  // 画像が消えてから次の表示開始迄の待ち時間  (初期値 0.10秒)
var chg= 10;   // 一秒当たりの描画の切替え回数              (初期値 10 回)
// ************************** 入力事項ここまで **************************
更新履歴
・05/06/10 ver 1.20 原画像の縦横比を読みとるように更新
・03/10/31 ver 1.10 デザインの指定法をタグで調整出来るように更新
・03/10/15 ver 1.00 コメントを同時表示出来るよう更新
・03/04/20 ver 0.00 スライドショーより拡張性を持たしたタイプを初公開
ソースファイル
・ まず、<body>〜</body>の間の任意の場所に、下記の部分をコピーアンドペーストして下さい。
<!-- ******************** 表示をデザインする ********************** -->
<!-- タイトル -->
<span id="ttle" style="position:absolute;font:bold 15pt MS ゴシック; color:#609060">
  北アルプスの風景</span><br><br>
<!-- スライド本体 -->
<div id="gakubuti" style="position:absolute; border:outset #80d080; z-index:2;
  background-color:#ffffff"></div>
<div id="slide" style="position:absolute; z-index:3; filter:alpha();"></div>
<!-- コメント -->
<span id="comm" style="position:absolute; border:inset 1.5 #a0a080; font:11pt MS ゴシック;
  padding:5; background-color:#ddffdd"></span><br>
<!-- スイッチ -->
<span id="swit" style="position:absolute;"></span>
<!-- ************************* ここまで *************************** -->

・ 次に、<body>〜</body>の間の任意の場所に、下記の部分をコピーアンドペーストして下さい。
<script type="text/javascript">
<!--// slide_auto01_cm ver1.20  (ぱーぷりんの溜まり場)
ugoku=new Array(); // この行は触らないで・・

// ***************************  入力事項  *****************************
// ======= 入力1:スライド画像の設定 =======
// 出したい画像の種類を必要数だけ表示順に入力(0から順に)
// 右側は、その写真に対するコメントを入れてください
// 注意!! 画像(写真)の縦と横の比は一定に加工しておいて下さい
ugoku[ 0 ]=new Array("../parts/sinho0.jpg", "ハード斜面のビッグバーン");
ugoku[ 1 ]=new Array("../parts/sinho1.jpg", "岐阜県最高峰の笠岳");
ugoku[ 2 ]=new Array("../parts/sinho2.jpg", "山容の美しい西穂高岳");
ugoku[ 3 ]=new Array("../parts/sinho3.jpg", "北アルプスの拠点 西穂山荘");
ugoku[ 4 ]=new Array("../parts/sinho4.jpg", "大正池を作った焼岳");
// ======= 入力2:位置等の設定 =======
var xx = 90;               //スライドショー左端までの間隔(ピクセル)
var yy = 60;               //スライドショー上端までの間隔(ピクセル)
var pitch = 3.0;           // スライドする間隔(秒)(初期値 3.0)
var haba = 400;            // 表示する幅(ピクセル)(初期値 400)
var taka =0;               // 表示する高さ(ピクセル) 0ならば自動設定
var waku = 15;             // 額縁の厚さ(ピクセル)(初期値 15)
var str = "0";     // スライド開始スイッチの画像 「0」ならばボタン選択
var stp ="../parts/stp.gif";  // スライド停止スイッチの画像
// ======= 入力3:表示・消滅の速さの調整 =======
var ed=  70;   // 画像の表示が変化する時間で、大きいほど長い(初期値 100)
var nw= 0.10;  // 画像が消えてから次の表示開始迄の待ち時間  (初期値 0.10秒)
var chg= 10;   // 一秒当たりの描画の切替え回数              (初期値 10 回)
// ************************** 入力事項ここまで **************************

 var mai=ugoku.length-1, n=0, inc=100;

// タイトルの設定
 ttle.style.left=xx+20;
 ttle.style.top=yy;

// 画像の設定
 first_img = new Image(); first_img.src = ugoku[0][0];
 slide.innerHTML="<img src='"+ugoku[0][0]+"' name='imgs'>";
  w_img=document.imgs.width; h_img=document.imgs.height;
 imgs.style.width=haba;
  if (taka==0){ taka = haba*h_img/w_img }
 slide.style.height=taka;
 slide.style.backgroundColor="#ffffff";
 slide.style.overflow="hidden";
 slide.style.left=xx+waku;
 slide.style.top=yy+30+waku;

// 額縁の設定
 gakubuti.style.borderWidth=waku;
 gakubuti.style.width=haba+waku*2;
 gakubuti.style.height=taka+waku*2;
 gakubuti.style.left=xx;
 gakubuti.style.top=yy+30;

// -----  コメントの設定  -----
 comm.innerHTML=ugoku[0][1];
 comm.style.width=haba;
 comm.style.top =yy+taka+waku*2+37;
 comm.style.left=xx+waku;
 comm.style.textAlign="center";

// コントロールスイッチの設定
 if (str!=0) { swit.innerHTML=
  "<span onclick='dec_sakura()'><img src='"+str+"' border=0 hspace=20></span>"+
  "<span onclick='end()'><img src='"+stp+"' border=0 hspace=20></span>"; }
 else { swit.innerHTML=
  "<input type='button' value='開始' onclick='dec_sakura()'>     "+
  "<input type='button' value='停止' onclick='end()'>"; }
 swit.style.left=xx+20;
 swit.style.top=yy+taka+waku*2+70;

// ----- 関 数 -----
function inc_sakura() {
 slide.filters.alpha.opacity = inc;
 if(inc<=100){ inc+=500/ed;
  tim=setTimeout("inc_sakura()",1000/chg); }
 else {clearTimeout(tim); hyoji(); } }

function dec_sakura() {
 slide.filters.alpha.opacity = inc;
 if(inc>1){ inc-=500/ed;
  tim=setTimeout("dec_sakura()",1000/chg); }
 else { clearTimeout(tim);
  if (n>=mai) { n=0 } else { n++ }
  comm.innerHTML=ugoku[n][1];
  document.imgs.src=ugoku[n][0]; mati(); } }

function hyoji() { setTimeout("dec_sakura()",1000*pitch); }
function mati()  { setTimeout("inc_sakura()",1000*nw); }

function end(){
 clearTimeout(tim); }
//-->
</script>