みなさんこんにちは！Kotonoです。
今回はJavaScriptにおける「画像の切り替え」について解説していきたいと思います。
この記事では
・画像の切り替えとは
・画像を切り替える方法（基本編）
といった初歩的な内容から
・一定時間で画像を切り替える方法
・進む・戻るボタンを搭載する方法
など、より応用的な内容に関しても分かりやすく説明していきたいと思います。
画像の切り替えとは
今回みなさんにご説明したいのは「画像の切り替え」テクニックです。
ウェブページなどでよく見かける画像のスライドショーなどは、これから解説するテクニックの応用です。
画像の上をクリックすると次の画像が現れたり、戻る・進むボタンが設置されていたり、ある一定期間で画像が自動的に変わるなど、すべてJavaScriptで簡単に行うことが出来ます。
画像を切り替える方法（基本編）
ではまず最初に、基本的な画像の切り替え方法を学びましょう。
以下のコードをご覧ください。
<html>
<body>
<img id="mypic" onclick="slideshow()" src="pics/1.jpg" width="400" height="300">
<script>
var pics_src = new Array("pics/1.jpg","pics/2.jpg","pics/3.jpg");
var num = 0;
function slideshow(){
if (num == 2) {
num = 0;
}
else {
num ++;
}
document.getElementById("mypic").src=pics_src[num];
}
</script>
</body>
</html>
上のコードでは、まず一番目に表示させる画像をHTMLタグのimgを使用し、ウェブページに表示させています。
そしてそのHTMLのonclick属性を使用し、画像をクリックしたときに発動させる関数slideshowを指定しました。
onclickに関する詳しい説明は、以下のリンクを参照してください。
scriptタグ内には画像の切り替えに必要なJavaScriptコードが記入されています。
まずは配列pics_arrayには表示させたい画像のsrcを文字列として格納します。
今回、画像はすべてpicsというフォルダー内に保存したので、このようなパス名となっています。
関数slideshowは、肝心の切り替えの処理を行います。
変数numが2であれば、最後の画像（0から数えて2は3個目）を表示させたということなので、画像は最初のものに戻るので、変数numを0に戻します。
反対に変数numが2以下であれば、次の画像に進むだけなので1を足します。
そしてgetElementById関数を使用し、先ほど設定したimgタグ内のsrc属性を、次の画像のパス名に変更します。
各画像のパス名は、先ほど説明したように配列pics_arrayに格納されています。
例えば、一番目の画像のパス名はpics_arrayの0番目の要素、二番目の画像は1番目の要素、といった具合です。
実際に上のコードを実行すると、以下のような画像が表示されます。
それをクリックすると、二番目の画像が表示され、その次は三番目の画像が表示されます。
画像を切り替える方法（応用編）
では、基本的な画像の切り替え処理を学んだところで、先ほどのサンプルコードをベースに応用を加えてみましょう。
今回紹介する応用テクニックのみでなく、様々な工夫を施してオリジナルで自分好みのスライドショーを作成してみてくださいね。
一定時間で画像を切り替える方法
先ほどのサンプルコードでは、画像の上をクリックすることで画像の切り替えを行っていました。
今回は画像の上のクリックなどをせずに、ある一定期間を過ぎると自動的に画像が切り替わるようにコードを書いて行きたいと思います。
以下のコードをご覧ください。
<html>
<body>
<img id="mypic" src="pics/1.jpg" width="400" height="300">
<script>
var pics_src = new Array("pics/1.jpg","pics/2.jpg","pics/3.jpg");
var num = -1;
slideshow_timer();
function slideshow_timer(){
if (num == 2){
num = 0;
}
else {
num ++;
}
document.getElementById("mypic").src=pics_src[num];
setTimeout("slideshow_timer()",1000);
}
</script>
</body>
</html>
上のコードは、先ほどご紹介した基本的な画像の切り替えのコードと似ています。
同じようにウェブページには最初に表示する画像をimgタグに埋め込んでいますが、onclick属性は今回は使用していません。
その代り、新しい関数slideshow_timerがあります。
この関数は、先ほどのslideshow関数とほぼ同じですが、最後にsetTimeout関数を使用しています。
setTimeout関数は、第一引数に呼び出したい関数名、第二引数に実行するタイミング（インターバル）を指定します。
今回は1000ミリ秒と指定したので、1秒後には次の画像に切り替わるという仕組みです。
setTimeout関数に関するより詳しい説明は、以下のリンクを参照してください。
進む・戻るボタンを搭載する方法
このセクションでは、進む・戻るボタンを使用し、スライドショー内の画像を自由自在に行き来する方法をご紹介します。
以下のコードをご覧ください。
<html>
<body>
<img id="mypic" src="pics/1.jpg" width="400" height="300">
<input type="button" value="戻る" onclick="go_back()">
<input type="button" value="進む" onclick="go_forward()">
<script>
var pics_src = new Array("pics/1.jpg","pics/2.jpg","pics/3.jpg");
var num = 0;
function go_forward(){
if (num == 2) {
num = 0;
}
else {
num ++;
}
document.getElementById("mypic").src=pics_src[num];
}
function go_back(){
if (num == 0) {
num = 2;
}
else {
num --;
}
document.getElementById("mypic").src=pics_src[num];
}
</script>
</body>
</html>
上のコードでは、ウェブページ上に最初に表示する画像のみでなく、二つのボタンを設置しました。
二つのボタンとは戻るボタンと進むボタンの二つで、両方クリック時に発動させたい関数があるため、onclick属性を使用します。
進むボタンのonclick属性にはgo_forward関数が指定されています。
これは、先ほどの基本的なサンプルコードにあったslideshowと全く同じもので、時計回りに画像を次々に表示させる仕組みです。
戻るボタンのonclick属性にはgo_back関数が指定されています。
go_back関数は、反時計回りに画像を表示させるので、最初の画像から戻るボタンをクリックすると、最後の画像が表示させることとなります。
上のコードを実行すると、以下のようなスライドショーが表示されます。
ご覧いただけるように、画像の横に二つボタンが設置されています。
まとめ
今回はJavaScriptにおける「画像の切り替え方法」について解説しました。
画像の切り替え処理を学ぶことによって、スライドショーなどを作成することが出来ます。
また、様々なオプションや設定で、自由自在にオリジナルのスライドショーを作成できるようにもなります。
みなさんもこの記事を通して、画像の切り替えに関する知識をどんどん深めていってくださいね。
