初心者による初心者のためのJavaScript講座Ⅴ|ゼロからのWeb制作 Vol.20

ペンギン,ジャバジャバ

ペンギン,ジャバジャバ

こんにちは、鈴木です。

今回は、スライドショーボタンを設置し、4枚の画像を自動的に切り替わるようにしたいと思います。

目次

  1. 今回のプログラムコード
  2. プログラム解説

1.今回のプログラムコード

今回書くプログラムも前回の内容を使って、追加する部分だけを書いていきます。

<html>
<head>
<title>スライドショー</title>
<script type ="text/javascript">
<!--
var slideid;
var flag = 0;
function slideshow(){
if (flag == im.length-1){
flag=0;
}else{
flag++;
}
document.myImage.src = "photo/"+im[flag];
slideid=setTimeout( "slideshow()" , 1000 );
}
function stopshow() {
clearTimeout(slideid);
}//-->
</script>
</head>
<body>
<form>
<input type="text" size=43 name = "myFormDate">
</form>
</body>
</html>

こちらが今回追加するコードです。

2.プログラム解説

まず、新しい変数として以下の二つを加えます。

var slideid;-①
var flag = 0;-②

①の変数は、スライドーショーを開始する時や終了する時に使うタイマーIDです。

②の変数は、現在の表示している画像番号を表す変数です。

次に関数について見ていきます。

function slideshow(){
if (flag == im.length-1){
flag=0;
}else{
flag++;
}
document.myImage.src = "photo/"+im[flag];
slideid=setTimeout( "slideshow()" , 1000 );
}

これはスライドショーを開始するための関数です。

始めのifは「もし現在表示している画像が4枚目の画像だったら1枚目の画像を表示します」という意味です。

flagは先程説明した変数で、imというのはJavaScript講座Ⅲで指定した配列Arratです。

lengthはArrayオブジェクトのメンバの一つで配列の長さを表します。

length-1になっているのはArrayは0から数えはじめArrayでは最後の画像は3になります。

しかし、lengthでは画像の数は4つになり、Arrayに合わせるためにlength-1になります。

そして、elseは「もし、4枚目の画像でなければ現在表示している画像番号に1足します」という意味です。

++は+1を表します。

次にdocumentで現在の画像を表示します。

最後になりますが、スライドショーにするためにsetTimeoutメソッドを使います。

setTimeoutは、指定した時間間隔に関数を自動で実行させることができます。

これを使いslideshow()という関数を1秒(1000ミリ秒)後に実行します。

※setTimeoutでは時間間隔をミリ秒で表します。

また、setTimeoutは「指定された時間が経過したところで一回だけ処理を実行する」というメソッドです。

しかし、setTimeoutを関数内に書くことで指定した時間間隔で実行し続けるプログラムになります。

*「決められた時間間隔で繰り返し処理を実行する」setIntervalというメソッドがありますが、今回はsetTimeoutを使うことでコードを短縮することができたのでsetTimeoutを使いました。

function stopshow() {
clearTimeout(slideid);

現状ではスライドショーが実行されたら永遠と続いてしまいます。

これを止めるためにstopshow() という関数を作ります。

そこで使うのがclearTimeoutです。

これはsetTimeoutを停止させるためのメソッドです。

()内に指定したタイマーIDを書きます。

<input type="button" value="スライドショー"  onClick="slideshow();">
<input type="button" value="STOP" onClick="stopshow();">

ここでの説明は前回と同じです。

ボタンを新たに作り、そこに先程作った関数を埋め込みます。

これで今回追加したコードの説明は以上になります。

実際にブラウザに表示するとこちらのようになります。
資料

次回は秒単位で表示するデジタル時計をJavaScriptを使って作りたいと思います。