負けてたまるか。

脳トレ、プログラミング、PHP、WEB製作などのメモ

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
--.--.-- --:-- | スポンサー広告 | トラックバック(-) | コメント(-) | Edit
ボタンのクリック時に、スライドショーを再生します。

再生中にもう一度ボタンをクリックすると、スライドショーは停止します。



ソース

<script type="text/javascript">
<!--

img = ["tyuraHome.jpg" ,"tyuraFriend.jpg" ,"tyuraMilk.jpg" ,"tyuraFlower.jpg"];
// 画像アドレス

speed = 1000;
// 画像の切り替わる速さ

imgNo = 0;
// img配列を数字(0~3)で切り替え

imgSui = false;
// タイマーの再生、停止のスイッチ切り替え(true,false)

var timerID;
// タイマーID

imgYouso = img.length;
// imgの要素数

document.write("<img src="+img[0]+" id='pic3' width=230 height=230><br><br>");
// 画像を生成。ID名=「pic3」

document.write("<form><input type='button 'value='再生 'onclick='slideShow()' id='picBtn'></form>");
// フォームのボタンを生成。クリックで関数を実行。ID名=「picBtn」

function slideShow()
{
if(imgSui==false)
// もしスイッチがオフの状態ならば
{
imgSui = true;
document.getElementById("picBtn").value = "停止";
// フォームボタンのテキストを「停止」に設定

timerID = setInterval("slideRun()",speed);
// タイマーを一定毎に実行。関数slideRunを実行。
} else
{
imgSui = false;
document.getElementById("picBtn").value = "再生";
// フォームボタンのテキストを「再生」に設定

clearInterval(timerID);
// タイマーを解除
}
}

function slideRun()
{
imgNo++;
if (imgNo>=imgYouso){imgNo = 0;}
// もし数字がimgの要素数以上になったら、数字を0に初期化する
// 数字は0~3の間で変化し、img配列の参照に使用される


document.getElementById("pic3").src = img[imgNo];
// <img id="pic3">のソースをimg配列の要素に置きかえる。
}

//-->
</script>


解説

表示したい場所にスクリプトを記述します。



speed = 1000

画像の切り替わる速さを指定します。

この変数は、setInterval("関数名",ミリ秒) の「ミリ秒」に代入します。

時間の単位はミリ秒で、1秒 = 1000ミリ秒 となります。



imgNo = 0

img配列を数字(0~3)で切り替えます。



timerID = setInterval("slideRun()",speed)

タイマーを一定毎に実行します。さらに、関数slideRunを実行します。



if (imgNo>=imgYouso){imgNo = 0;}

もし数字がimgの要素数以上になったら、数字を0に初期化します。

数字を0に初期化することで、スライドショーが(0~imgの要素数)の範囲でずっと続くようになります。



緑色の文字は、必要に応じて書き換えてください。
スポンサーサイト
| ホーム |

カレンダー

04 | 2017/05 | 06
- 1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31 - - -

最近の記事

月別アーカイブ

タグリスト

ブログ内検索

カテゴリー

RSSフィード

リンク

ブロとも申請フォーム

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。