完成ソース：自動進行編
前ページの自動進行式のスクリプトを含めたHTMLソースの全容です。 下記をテキストエディタにコピー&ペーストして、HTML文書として保存すれば、表示する画像などを設定するだけで利用できます。
完成ソース：
<html>
<head>
<title>自動進行式スライドショー</title>
<script type="text/javascript">
<!--
// made by Ki_NG
var n=0;
var ss_pic=new Array();
for (i=0; i<=5; i++){
ss_pic[i]=new Image();
}
ss_pic[0].src="***0.jpg";
ss_pic[1].src="***1.jpg";
ss_pic[2].src="***2.jpg";
ss_pic[3].src="***3.jpg";
ss_pic[4].src="***4.jpg";
ss_pic[5].src="***5.jpg";
function sshow(){
document.ssscreen.src=ss_pic[n].src;
n++;
if (n==6){ n=0;}
else {setTimeout("sshow()",1500);}
}
//-->
</script>
</head>
<body>
<p>
<img src="***0.jpg" width="" height="" name="ssscreen" alt="*"><br>
<input type="button" value="スタート" onClick="sshow()">
</p>
</body>
</html>
このソースを実際に利用する際、画像の枚数が例と異なる場合は、for文の中の「i<=5;」の部分の5の値を使用する画像の枚数に、関数内の「 if (n==6){ n=0;}」の行の6の値を使用する画像の枚数+1にそれぞれ直し、「ss_pic[x].src」を使用する画像の枚数分だけ定義するようにしてください。
使用する画像のURIは、「ss_pic[0].src="***0.jpg";」の部分で、配列の中に格納していきます。 表示する順番に沿うように、画像のURIを記入することを忘れないようにしてくださいね。 なお、サンプルソース中の「***0.jpg」は、一番初めの初期画像にあたります。
画像を入れ替える時間間隔は、「 else {setTimeout("sshow()",1500);}」の部分の1500の値を調整することで変更できます。 ここの部分の単位はミリ秒(1000分の1秒)ですので、それを踏まえて適宜調整してください。
<img>タグ内の「width」、「height」、「alt」の各属性は、それぞれのページに合わせて設定してください。 なお、スライドショーの画像にこのサイズと一致しない画像が含まれる場合、その画像は自動的に、<img>要素の設定値に合わせた伸縮処理をされて表示されると思います。 ただ、なるべく画像のサイズは揃えておいたほうが、スマートに表示できるでしょう。