| ポイント |
<![CDATA[
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;
]]>
|
| 説 明 |
スライドショーを行うには、あらかじめ表示する画像を連番にしておきます。サンプルでは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"; // スライドショーで表示する画像の拡張子
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)
{
setInterval("nextPage(1)",msec);
}
// --></script>
</head>
<body>
<center>
<img src="images/0.jpg" name="slideImage"><br><br>
<a href="javascript:nextPage(-1)"><img src="images/left.gif" border="0"></a>
<a href="javascript:nextPage(1)"><img src="images/right.gif" border="0"></a><br>
<a href="javascript:setTimer(2000)">[２秒ごとに順番に再生]</a>
</body>
</html>
]]>
|
| 補足説明 |
Opera、Safari、iCabでも動作します。 |
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!
|
スライドショー（自動再生）