スライドショー
では、ロールオーバーの応用編として、スライドショーの作成をしてみましょう。 スライドショーでは、複数の画像を順次入れ替えて、紙芝居のように表示させるようなスクリプトを組めばよいことになります。 つまり、コアとなる基本的な部分はロールオーバーの処理と変わりありませんが、変更される画像ファイルの量が多くなる分、やや複雑になります。 とはいえ、これらは前ページまでに解説した内容ですべて理解できている範囲になると思います。 その部分をまずまとめましょう。
画像の取得
スライドショーの場合、画像の変更が順次行われるため、変更される画像はすべて先に取得しておく必要があります。 また、これをそのまま変数で定義してしまうと、スクリプトが肥大化するので、画像を取得する際には、変数ではなく配列を利用します。
配列というのは、扱い方は変数とほぼ同等のものですが、ひとつの配列名の中に、複数の値を収めておくことができます。 変数が入れ物の箱だとすると、配列は仕切りのついた入れ物に例えることができます。 配列の中身のそれぞれの仕切りには番号が振ってあり、それで格納した値を管理しています。 配列は変数と違い、利用する前にまず配列を作成することを宣言する必要があります。 配列を利用する際には、まず「配列名= new Array();」と記述して、それが配列であることを事前に定義します。 そうした後は、通常の変数のように、値を格納させることができるようになります。 なお、配列に値を格納する場合には、配列のどこにその値をしまったのかを番号で特定し、また格納された値を利用するときも番号で内容を特定して値を取り出すようになります。 具体的には、「配列名[番号]=格納する値」というような記述を行います。
今回は、配列を利用してその中にスライドショーで利用するImageオブジェクトを格納していきます。 その部分の記述について、具体例を挙げていきます。
例：
var ss_pic=new Array(); //配列の作成
for (i=0; i<=4; i++){
ss_pic[i]=new Image(); //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」という名前の配列を作成し、その配列内の要素をImageオブジェクトとして定義し、それらのImageオブジェクトとして定義した配列の中に画像ファイルのURIを格納しています。 例の中では5枚分の任意の画像を取り込むような記述にしてありますが、枚数が多い場合は定義する部分を画像の数に合わせて増減すれば良いです。
画像差し替え処理
画像を差し替えさせる処理は、前ページに挙げてあるものと変わりありません。 全体のスクリプトとしては、画像を入れ替えさせたりする分、周辺の条件設定などは複雑化しますが、コアになるところは不変です。
例(画像変更処理部のみ)：
document.images[1].src=ss_pic[n].src;
スライドショー
スライドショーにするためには、順次画像を変更していく必要があります。 画像を順次入れ替えるためには、何かマーカーとなる変数を定義しておいて、そのマーカーを全枚数中のどの画像が今表示され、次に何を表示させるのかを特定する手がかりにするのが良いでしょう。 たとえば、まずスクリプトが読み込まれたときにnという変数を0と定義しておき、画像が入れ替わる度にnの値を1ずつ増加させる処理を組み込めば、先に配列を利用して画像を格納していることも含めて、円滑に画像を入れ替えさせる処理を走らせることができるようになると期待できます。
例：
function sshow(){
document.images[1].src=ss_pic[n].src;
n++;
}
このようにすると、sshow()という関数が呼び出されるたびに、特定の画像がn枚目の画像に入れ替えられ、次にnの値が1大きくなります。 これは、基本的なやり方として、覚えておいて下さい(今回は、このままの形では使いませんが…)。