進行管理
では、実際的なスライドショーとしての機能を付加していきます。 スライドショーは、画像が順次変更される効果ですが、この画像を入れ替えるタイミングをどう管理するかによって、若干スクリプトの組み方が変わります。 たとえば、ユーザーがボタンをクリックするごとに画像が入れ替わる仕掛けにするのか、スタートボタンを作っておいて、それがクリックされたら自動的に一定時間事に画像が入れ替わるようにするのかでは、スクリプトの作りがぜんぜん違ってきます。 今回は、両方のケースについて想定していきます。
ユーザーの任意でスライドを進行させる
このケースは、非常に単純です。 自動的な処理を行う必要がないので、onClickで順次画像を差し替えていく処理をまとめた関数を呼び出すようにすれば良いだけです。 実例をそっくりまとめて見ましょう。
例<head>内：
<script type="text/javascript">
<!--
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>
例<body>内：
<img src="***0.jpg" name="ssscreen" id="ssscreen">
<input type="button" value="次" onClick="sshow()">
スライドショーを進行させるボタンを押すと、関数sshow()が呼び出され、処理を行います。sshow()では、nが5の場合はnを0として再定義し、そうでない場合はnの値を一つ大きくする処理が実行された後、画像の入れ替えが行われます。 こうすることで、ボタンがクリックされるごとに画像が入れ替わり、最後まで進行したらまたnがリセットされて、はじめの画像が再び表示されるようになります(***0.jpgが初期状態の画像になります)。
自動的に画像を変更させる
JavaScriptでは、処理を行うタイミングを調整させることのできるメソッドがいくつかあります。 それらを利用すれば、数秒に一度、自動的に画像を変更させることのできる処理を組むことができます。 通常は、2つの方法が考えられます。
setTimeout()
このメソッドは、一定時間待った後に、指定された処理を1度だけ実行させるものです。 記述は「setTimeout("実行する処理内容",待機時間)」のように行います。 ここで指定する待機時間の単位は、ミリ秒(1000分の1秒)単位になります。 この処理が実行されると、待機時間だけ待った後に、括弧内で指定した処理を行います。 これを利用して、これを関数の中で定義しておき、その関数の中からsetTimeout()で自関数を呼び出す(再帰といいます)と、同じ関数内の処理が一定時間ごとに繰り返されることになります(setTimeout()が呼び出されるたびに再度処理されるため)。 こちらを利用して自動的に画像が入れ替わるようにする場合は、以下のように記述します。
例(setTimeout()を利用)：
function sshow(){
document.ssscreen.src=ss_pic[n].src;
n++;
if (n==6){ n=0;}
else {setTimeout("sshow()",2000);}
}
前掲のスクリプト内の関数を、例のように書き換えると、2秒ごとに自動的に画像が入れ替わるスライドショーになります。 それ以外の部分は、前掲の例とまったく同じです。 こちらのスクリプトは、まず画像を入れ替える処理を行い、次にマーカーのnに1を加えて、その後nの値を評価して、nが6だった場合はnを0にして処理を終了させ、nが6未満だった場合は2秒の間隔を空けて再び関数sshow()が実行されるような処理になっています。
setInterval()
こちらのメソッドは、一定時間ごとに指定された処理を繰り返すものです。 setTimeout()は1度だけ処理を行って終了しますが、こちらは延々と処理を繰り返します。 具体的な記述方法はsetTimeout()と大差ありません。 「setInterval("実行する処理内容",処理を行う時間間隔)」というように記述します。 ただし、この記述法では処理の終了が定義されないので、処理を終了させるための仕掛けも同時に組み込んでおく必要があります。 それも踏まえて、こちらも前掲の例のソースをベースにして、具体的な例を書いていきます。
例(setInterval()を利用)：
スクリプト部
function sshow(){
document.ssscreen.src=ss_pic[n].src;
n++;
if (n==6){
n=0;
clearInterval(autoss);}
}
呼び出し部
<input type="button" value="スタート"
onClick="autoss=setInterval('sshow()',2000);">
<input type="button" value="一時停止"
onClick="clearInterval(autoss);">
(表示の都合上、折り返していますが、実際には改行しないで下さい。)
前掲のスクリプトのうち、関数部分とボタンの呼び出し部を改造します。 関数を呼び出すボタンは、setInterval()を呼び出すボタンに書き換えて、2秒ごとにスライドショーが進行するようにしてあります。 また、この際にはsetInterval()の処理に「autoss」というIDを与えてあります。 これは、setInterval()の処理を強制的に終了させるために必要になります。 関数は、setTimeout()のときのような内容に書き換えてあります。 ただ、こちらはnが6になったときにnを0に戻して、「clearInterval(autoss)」でID名autossを与えられているsetInterval()の処理を停止させるようにしてあります。 こちらは自動的に同じ関数の再処理が行われるので、それ以外の記述は不要になります。 なお、呼び出し部の一時停止ボタンはおまけです。 こちらをクリックすることで、スライドショーを一時停止させることができます。