スライドショー

　以下は Head タグ内でのスクリプトの記述です。元画像と縮小画像の二種類の画像をあらかじめ用意しておき、決めておいたフォルダにまとめて置いておきます。このフォルダは、画像ファイルとは別に、sDir という変数で設定しています。さらに、Headタグ内で縮小画像をプリロードして、すぐに表示できる準備をしておきます。
　画像ファイルは適当に増減することが可能です。 aItem[nCount++] の行を増やすか減らすかするだけです。ただし、表示画像ゼロの時のエラー処理はしていませんので注意してください。

// JavaScriptソース (head)
var nCount = 0;     // イメージ数
var nTemp = 0;      // 現在表示中のインデックス（0 〜 画像数-1）
var bPlay = false;    // 自動再生中かどうか（再生中はtrue,停止中はfalse）
var oTimer;           // タイマーID

// メンテナンス部分 --------------------------------
// sTitle:全体のタイトル、sDir:画像のディレクトリ、nInterval:タイマーの間隔（ミリ秒）
// aItem:画像ごとのデータ（拡大画像のURL、縮小画像のURL、画像の説明文）
var sTitle = "映画 『禁断の惑星』 より";
var sDir = "slideshow/";
var nInterval = 3000;
var aItem = new Array();
aItem[nCount++] = new Array("scene01.jpg", "scene01_s.jpg", "- アンドロメダ号とアルタイル星 -");
aItem[nCount++] = new Array("scene02.jpg", "scene02_s.jpg", "- ロボット・ロビー -");
aItem[nCount++] = new Array("scene03.jpg", "scene03_s.jpg", "- アルテアとモービアス博士 -");
aItem[nCount++] = new Array("scene04.jpg", "scene04_s.jpg", "- アルタイルの墓地 -");
aItem[nCount++] = new Array("scene05.jpg", "scene05_s.jpg", "- クレル人の教育装置 -");
aItem[nCount++] = new Array("scene06.jpg", "scene06_s.jpg", "- 謎の怪物の爪 -");
aItem[nCount++] = new Array("scene07.jpg", "scene07_s.jpg", "- イドの怪物 -");
aItem[nCount++] = new Array("scene08.jpg", "scene08_s.jpg", "- アダムス船長とアルテア -");
// ---------------------------------------------

// 表示画像のプリロード
var aImage = new Array(nCount);    // 表示画像の配列
var i = 0;
while (i < nCount) {
    aImage[i] = new Image();
    aImage[i].src = sDir + aItem[i][1];
    i++;
}

// 表示画像の選択（縮小画像の表示）
function MoveIndex(mode) {
    if (mode == "head") {            /* 先頭 */
        nTemp = 0;
    } else if (mode == "prev") {    /* 戻る */
        if (nTemp>0) nTemp--;			
    } else if (mode == "next") {    /* 進む */
        if (nTemp<nCount-1) nTemp++;
    } else if (mode == "tail") {      /* 末尾 */
        nTemp = nCount-1;
    }
    document.Form1.Text1.value = sTitle + " (" + (nTemp+1) + "/" + nCount + ")";
    document.Form1.Text2.value = aItem[nTemp][2];
    document.Img1.src = aImage[nTemp].src;
}

// 新しいウィンドウを開く元画像の表示）
function OpenWindow() {
    var wnd = window.open(sDir+aItem[nTemp][0], nTemp);
}

// 再生/停止の設定
function PlayStop() {
    if (bPlay) {
        StopTimer();
    } else {
        StartTimer();
    }
}

// タイマーの開始
function StartTimer() {
    if (nTemp<0 || nTemp>=nCount-1) {
        // インデックスが範囲外のとき
        StopTimer();
    } else {
        MoveIndex("next");
        document.Form1.Button1.value = "停止";
        bPlay = true;
        oTimer = setTimeout("StartTimer()", nInterval);
    }
}

// タイマーの停止
function StopTimer() {
    clearTimeout(oTimer);
    bPlay = false;
    document.Form1.Button1.value = "再生";
}  

　フォームは、二つの text, ひとつの img, 五つの button を配置します。Bodyタグ内にもスクリプトの記述を行い、最初の画像の表示を行っています。

<!-- HTMLソース -->
<form name="Form1" style="margin:1em; text-align:center;">
    <input type="text" name="Text1" size="50" style="border:0; text-align:center;"><br>
    <input type="text" name="Text2" size="50" style="border:0; text-align:center;"><br>
    <img name="Img1" title="クリックで拡大表示" 
            onclick="OpenWindow()" style="margin:3px;"><br>
    <input type=button value="先頭" onclick="MoveIndex('head')">
    <input type=button value="戻る" onclick="MoveIndex('prev')">
    <input type=button name="Button1" value="再生" onclick="PlayStop()">
    <input type=button value="進む" onclick="MoveIndex('next')">
    <input type=button value="末尾" onclick="MoveIndex('tail')">
</form>
// JavaScriptソース (body)
<script type="text/javascript"><!--
    MoveIndex("head");
//--></script>