完成ソース:自動進行編(一時停止機能付き)
前ページの一時停止もできる自動進行式のスクリプトを含めた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; clearInterval(autoss);} } //--> </script> </head> <body> <p> <img src="***0.jpg" width="" height="" name="ssscreen" alt="*"><br> <input type="button" value="スタート" onClick="autoss=setInterval('sshow()',1500);"> <input type="button" value="一時停止" onClick="clearInterval(autoss);"></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」は、一番初めの初期画像にあたります。
<img>タグ内の「width」、「height」、「alt」の各属性は、それぞれのページに合わせて設定してください。 なお、スライドショーの画像にこのサイズと一致しない画像が含まれる場合、その画像は自動的に、<img>要素の設定値に合わせた伸縮処理をされて表示されると思います。 ただ、なるべく画像のサイズは揃えておいたほうが、スマートに表示できるでしょう。
画像を入れ替える時間間隔は、<input>タグ内の「onClick="autoss=setInterval('sshow()',1500);"」の部分の1500の値を調整することで変更できます。 ここの部分の単位はミリ秒(1000分の1秒)ですので、それを踏まえて適宜調整してください。