..



 ■HomeJavaScriptサンプル集〔インタラクティブ編〕−画像制御(スライドショー(自動))

JavaScript 無料のフリースクリプト集...
スライドショー
スライドショー(自動)

 JavaScriptでスライドショーを行います。「再生」ボタンで自動再生します。
 ※通信速度が遅いと画像の読み込みまでに時間がかかる場合があります。



 HPでの使用方法
1.プログラムのダウンロード

 適当なフォルダかスライドショーを表示するHTMLのあるフォルダに下記のプログラムと実行HTMLをダウンロードして下さい。サーバーに アップする時もこれらがばらけないように同じフォルダに入れて下さい。次のリンクを右クリックして「対象をファイルに保存」を選ぶとダウンロードできま す。



 プログラムファイル
 slideat.js
 実行HTMLファイル
 slideatexec.html



このように小さい画像を用意してページに貼り付けることもできます→
..


2.<body>〜</body>タグ間の編集

 HTMLのスライドショーを表示したい部分に次の赤字を挿入してください。この作業はコピー&ペーストでもOKで す。表示するHTMLと別のフォルダに画像やプログラムファイルを置く場合はsrcのファイル名にパスを通してください。画像のファイルが大きかったり小 さい時は<iframe>のwidth(幅)とheight(高さ)の値を調整してください。

<body>・・・
<iframe src="slideatexec.html" width="350" height="320" frameborder="1" scrolling="no" allowtransparency="true">
</iframe>

・・・</body>


3.画像ファイルの設定

 プログラムファイルの一行目の配列に画像のファイル名を記入してください。画像の個数はいくつでもかまいません。二行目の数値を変えることで画像が切り替わる早さを調節することができます。(1000分の1秒単位)


4.スライドショー枠内の背景

 スライドショー枠内の背景の画像や色は、実行HTMLファイル「slideatexec.html」の<body>タグに設定します。



プログラムリスト(slideat.js)
imFile=["image0.jpg","image1.jpg","image2.jpg","image3.jpg","image4.jpg","image5.jpg"];
slideInt=1000;
imNo=0;
imLoad=false;
var slideTimeId;
imMax=imFile.length;
document.write("<div align='center'>");
document.write("<img src="+imFile[0]+" name='pic'><br><br>");
document.write("<form name='picForm'>");
document.write("<input type='button' value='再生' onclick='slideLoad()' name='picBt'></form>");
document.write("</div>");
document.write("<div align='right'>");
document.write("<span style='font-size:9px;background-color:rgb(200,200,200);'><a href='http://plusone.jpn.org/javascript/' target='_blank'>+1JavaScript</a></span>");
document.write("</div>");
function slideLoad()
{
    if(imLoad==false)
    {
       imLoad=true;
       document.picForm.picBt.value="停止";
       slideTimeId=setInterval("slideRun()",slideInt);
    }else{
       imLoad=false;
       document.picForm.picBt.value="再生";
       clearInterval(slideTimeId);
    }
}
function slideRun()
{
    imNo++;
    if(imNo>=imMax){imNo=0;}
    document.pic.src=imFile[imNo];
}

※上記のサンプルプログラムをコピー&ペーストで実行する場合は以下の画像ファイルを右クリックして「対象を保存」で同じフォルダ内に保存してください。

image0.jpg  image1.jpg   image2.jpg  image3.jpg   image4.jpg  image5.jpg

一括ダウンロードファイル: image.lzh
..


..


..