シンプルなスライドショー（コメント付き）の JavaScript
 戻　る

兵庫県八千代町の風景
スライド本体
コメント
スイッチ

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

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

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

<!-- ******************** 表示をデザインする ********************** -->
<table style="margin-left:100"><tr><td align="center">
 <span style="font:bold 15pt ＭＳ ゴシック; color:#a060a0">兵庫県八千代町の風景</span><br>
 <span id="slide" style="border:ridge 20 #b080b0; margin:5 0">スライド本体</span><br>
 <span id="comm" style="border:inset 1.5 #a0a080; font:11pt ＭＳ ゴシック; margin:5 0;
   padding:5; background-color:#ffddff">コメント</span><br>
 <span id="swit">スイッチ</span>
</td></tr></table>
<!-- ************************* ここまで *************************** -->


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

 ■ 「0」から順にスライドする画像を、アドレスを含むファイル名で指定します。
 ■ 画像に対応したコメントを、画像ファイルの右側に記入します。
 ■ 画面の表示幅は必ず入力してください。
 ■ 画面の高さの指定が「0」の場合、１枚目の画像の縦横比で決定されます。
 ■ 開始スイッチの画像が「0」ならば、停止スイッチの画像の指定は無効です。
 ■ その他、必要に応じて、指示に従い設定してください。

// ***************************  入力事項  *****************************
// ======= 入力１：スライド画像の設定 =======
// 出したい画像の種類を必要数だけ入力（0から順に）
// 右側は、その写真に対するコメントを入れてください
// 注意！！　画像（写真）の縦と横の比は一定に加工しておいて下さい
ugoku[ 0 ]=new Array("../parts/pic1.jpg", "大和川と桜並木");
ugoku[ 1 ]=new Array("../parts/pic2.jpg", "大和川に群生したすすき");
ugoku[ 2 ]=new Array("../parts/pic3.jpg", "ログハウス向けの分譲地");
ugoku[ 3 ]=new Array("../parts/pic4.jpg", "この先より遊歩道が始まる");
ugoku[ 4 ]=new Array("../parts/pic5.jpg", "路端の竹林");
// ======= 入力２：その他の設定 =======
var pitch=3.0;             // スライドする間隔（秒）（初期値 3.0）
var haba =400;             // 表示する幅（ピクセル）（初期値 400）
var taka =0;               // 表示する高さ（ピクセル） 0ならば自動設定
var str="0";               // 開始スイッチの画像  0ならばボタン選択
var stp="../parts/stp.gif";  // 停止スイッチの画像
// ************************* 入力事項ここまで **************************
更新履歴
・05/06/10　ver 1.20　原画像の縦横比を読みとるように更新
・03/10/29　ver 1.10　デザインの指定法をタグで調整出来るように更新
・03/10/15　ver 1.00　コメントを同時表示出来るよう更新
・03/04/19　ver 0.50　額縁の種類・色を設定可能にする。内部構造を更新
・03/04/13　ver 0.40　コントロールスイッチに画像を使えるよう更新
・03/04/10　ver 0.30　タイトル文字の大きさ、色、書体の設定を可能にした
・03/02/21　ver 0.20　表示の更新、表示幅・額の厚さ調整可能に、バグ修正
・02/11/21　ver 0.00　初　公　開
ソースファイル
・ まず、スライドショーを設置したい場所に、次のテーブル部分をコピーアンドペーストして下さい。
・ レイアウトはこの部分のタグを設定して調整してください。
<!-- ******************** 表示をデザインする ********************** -->
<table style="margin-left:100"><tr><td align="center">
 <span style="font:bold 15pt ＭＳ ゴシック; color:#a060a0">兵庫県八千代町の風景</span><br>
 <span id="slide" style="border:ridge 20 #b080b0; margin:5 0">スライド本体</span><br>
 <span id="comm" style="border:inset 1.5 #a0a080; font:11pt ＭＳ ゴシック; margin:5 0;
   padding:5; background-color:#ffddff">コメント</span><br>
 <span id="swit">スイッチ</span>
</td></tr></table>
<!-- ************************* ここまで *************************** -->

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

// ***************************  入力事項  *****************************
// ======= 入力１：スライド画像の設定 =======
// 出したい画像の種類を必要数だけ入力（0から順に）
// 右側は、その写真に対するコメントを入れてください
// 注意！！　画像（写真）の縦と横の比は一定に加工しておいて下さい
ugoku[ 0 ]=new Array("../parts/pic1.jpg", "大和川と桜並木");
ugoku[ 1 ]=new Array("../parts/pic2.jpg", "大和川に群生したすすき");
ugoku[ 2 ]=new Array("../parts/pic3.jpg", "ログハウス向けの分譲地");
ugoku[ 3 ]=new Array("../parts/pic4.jpg", "この先より遊歩道が始まる");
ugoku[ 4 ]=new Array("../parts/pic5.jpg", "路端の竹林");
// ======= 入力２：その他の設定 =======
var pitch=3.0;             // スライドする間隔（秒）（初期値 3.0）
var haba =400;             // 表示する幅（ピクセル）（初期値 400）
var taka =0;               // 表示する高さ（ピクセル） 0ならば自動設定
var str="0";               // 開始スイッチの画像  0ならばボタン選択
var stp="../parts/stp.gif";   // 停止スイッチの画像
// ************************* 入力事項ここまで **************************

 var mai=ugoku.length-1;    // 写真の全枚数
 var n=0;

// -----  画像の設定  -----
 first_img = new Image(); first_img.src = ugoku[0][0];
 slide.innerHTML="<img name='imgs' src='"+ugoku[0][0]+"'>";
  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";

// -----  コメントの設定  -----
 comm.innerHTML=ugoku[0][1];
 comm.style.width=haba;

// -----  コントロールスイッチの設定  -----
 if (str!=0) { swit.innerHTML="<span onclick='slideshow()'><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='slideshow()'>"+
   "　　　　　<input type='button' value='停止' onClick='end()'>"; }

// -----  関　数  -----
function slideshow(){
 comm.innerHTML=ugoku[n][1];
 document.imgs.src=ugoku[n][0];
 if( n >= mai ) { n=0; } else { n+=1; }
 show=setTimeout("slideshow()",1000*pitch); }

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