完成ソース:クリックで進行編
前ページのクリック式のスクリプトを含めた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(){ if (n==5){ n=0;} else { n++;} document.ssscreen.src=ss_pic[n].src; } //--> </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;」の部分と、関数内の「 if (n==5){ n=0;}」の行の5の値を使用する画像の枚数に直し、「ss_pic[x].src」を使用する画像の枚数分だけ定義するようにしてください。
使用する画像のURIは、「ss_pic[0].src="***0.jpg";」の部分で、配列の中に格納していきます。 表示する順番に沿うように、画像のURIを記入することを忘れないようにしてくださいね。 なお、サンプルソース中の「***0.jpg」は、一番初めの初期画像にあたります。
<img>タグ内の「width」、「height」、「alt」の各属性は、それぞれのページに合わせて設定してください。 なお、スライドショーの画像にこのサイズと一致しない画像が含まれる場合、その画像は自動的に、<img>要素の設定値に合わせた伸縮処理をされて表示されると思います。 ただ、なるべく画像のサイズは揃えておいたほうが、スマートに表示できるでしょう。