| ポイント |
<![CDATA[
function setTimer(msec)
{
if (flag) return;
timerID = setInterval("nextPage(1)",msec);
flag = true;
}
function clearTimer()
{
if (flag) clearInterval(timerID);
flag = false;
}
]]>
|
| 説 明 |
スライドショーを行うには、あらかじめ表示する画像を連番にしておきます。サンプルではimagesフォルダ（ディレクトリ）内に0.jpg, 1.jpg, 2.jpg,..., 10.jpg,....100.jpgのように番号を付けて入れておきます。このようにしておけばプログラム側では「変数名+".jpg"」という単純な方法で画像を入れ替えることができます。変数の値を増やせば次の画像に、減らせば前の画像が表示されます。自動的に表示させるにはsetIntervalを使ってページ表示処理を行う関数を定期的に呼び出します。自動再生を停止する場合にはタイマーをクリアします。ボタンクリックで再生を止めるのであればクリック時にタイマーを停止させます。 |
| サンプル |
<![CDATA[
<html>
<head>
<title>スライドショー</title>
<script language="JavaScript"><!--
Num = 0; // 表示しているページ数
maxPage = 4; // 最大枚数より１少ない数
repeateFlag = true; // trueだと最後まで行くと最初に戻る
sfx = ".jpg"; // スライドショーで表示する画像の拡張子
flag = false; // 自動再生フラグ
timerID = 0; // タイマー
function nextPage(n)
{
Num += n;
if (Num > maxPage) if (repeateFlag) Num = 0; else Num = maxPage;
if (Num < 0) if (repeateFlag) Num = maxPage; else Num = 0;
document.slideImage.src = "images/" + Num + sfx;
}
function setTimer(msec)
{
if (flag) return;
timerID = setInterval("nextPage(1)",msec);
flag = true;
}
function clearTimer()
{
if (flag) clearInterval(timerID);
flag = false;
}
// --></script>
</head>
<body>
<center>
<img src="images/0.jpg" name="slideImage"><br><br>
<a href="javascript:clearTimer();nextPage(-1)"><img src="images/left.gif" border="0"></a>
<a href="javascript:clearTimer();nextPage(1)"><img src="images/right.gif" border="0"></a><br>
<a href="javascript:setTimer(2000)">[２秒ごとに順番に再生]</a>
<a href="javascript:clearTimer()">[自動再生停止]</a>
</body>
</html>
]]>
|
| 補足説明 |
Opera、Safari、iCabでも動作します。 |
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!
|
スライドショー（自動再生／自動再生停止）