ひな形スクリプト講座25

今回はトランジションフィルタを使用してスライドショーを作ります。

スライドショーでは、画像ファイルの変更をスクリプトで行います。実際の方法としては、メインとなるIMGエレメントにトランジションフィルタを設定しておき、apply()メソッドで適用（凍結）、凍結状態で画像ファイルを入れ替え、play()メソッドで再生。これを時間コントロール（setTimeout()メソッド）で繰り返します。つまり、apply()と画像変更とplay()を関数のステートメントリストにしてその関数をsetTimeout()で繰り返します。

画像ですが、メールで添付できるようにIMGエレメントでファイルを参照できるようにします。今回は複数のIMGエレメントに同じidをつけてファイル参照させるようにします。

【１】複数の画像をIMGエレメントで参照し、非表示に設定しておく。その際idは同じにする。トランジションフィルタをスライドショーステージとなるエレメントに設定しておく。

ここではrevealTransフィルタ（transition=23、ランダム）を使用してみましょう。このtransition属性は最初に設定していると繰り返しの時にランダムになりません。繰り返しする際にその都度transitionプロパティを23に設定するようにすれば繰り返しの時にランダムになります。

通常idはユニーク（ドキュメント内では排他的・独自・唯一的）な重複しないように付けるのが基本ですが、ここでは敢えて同じidを付けてどの様に同じidの複数IMGエレメントを識別させるかを考えます。

idはsimgという同じidにしました。二つ目と三つ目はleft:-1000pxで表示領域外になるので見えない位置になります。一つ目のIMGエレメントをスライドショーのステージのように利用します。

【２】エレメントを特定させる。

さて、allコレクション（あるいはchildrenコレクション）では、idを識別子にすることができます。もしこのとき重複するエレメントがある場合、それらはコレクションに入ります。

document.all("simg")・・・simg識別子のエレメントのみ取得

そこでこれらを配列オブジェクトに入れておけば、インデックス番号でエレメントを特定できることになります。

var imgEls=document.all("simg")

この場合、imgEls[0]は一番目のsimgエレメント、imgEls[1]は二番目のsimgエレメント、imgEls[2]は三番目のsimgエレメントということになります。

さあ、これでエレメントを特定できるようになりました。

最初の画像はimgEls[0].srcですね。二番目はimgEls[1].src。三番目はimgEls[2].srcです。

これも入れるオブジェクトとしてコレクションにしましょう。配列オブジェクトをnewキーワードで作成しておかないとだめですよ。

var imgsrc=new Array()
imgsrc[n]=imgEls[n].src・・・nはインデックス番号です。

nの最大値はいくつですか？ここでは0,1,2の三つですが、もっとsimgエレメントが多い場合は?

そうimgElsのコレクション総数より1小さいimgEls.length-1ですね。

そこで次のようになります。

var imgsrc=new Array()
for(n=0;n<imgEls.length;n++){
imgsrc[n]=imgEls[n].src
}

ここは
var imgsrc=new Array()
for(n=0;n<=imgEls.length-1;n++){
imgsrc[n]=imgEls[n].src
}
でも同じです。

これで画像ファイルがimgsrcコレクションに保存できました。

【４】関数作成する。

関数名はslide()にしましょうか。まずはtransitonプロパティを23にしてから凍結。apply()ですね。ステージは？imgEls[0]で～す。

function slide(){
imgEls[0].filters["revealTrans"].transition=23
imgEls[0].filters["revealTrans"].apply()
}

画像を番号で変更します。もう今までの講座がわかっている方は剰余でできることに気がついていることでしょう。インデックス番号を表す変数をimgnoとすると、imgno=(imgno+1)%imgEls.length

var imgno=0
function slide(){
imgEls[0].filters["revealTrans"].transition=23
imgEls[0].filters["revealTrans"].apply()
imgno=(imgno+1)%imgEls.length
imgEls[0].src=imgsrc[imgno]
}

【５】トランジションを再生し、繰り返しする。

var imgno=0
function slide(){
imgEls[0].filters["revealTrans"].transition=23//繰り返しでランダムにする場合重要
imgEls[0].filters["revealTrans"].apply()
imgno=(imgno+1)%imgEls.length
imgEls[0].src=imgsrc[imgno]
imgEls[0].filters["revealTrans"].play()
setTimeout("slide()",5000)
}

さあまとめましょう。

[ソース]

<HTML>
<head>
<meta http-equiv="content-type" content="text/html; charset=shift_jis">
<META http-equiv="Content-Style-Type" content="text/css">
<title></title>
</head>
<body style="margin:0px; padding:0px;">
<img id="simg" src="ph1.jpg" style="position:absolute; left:20px; top:20px; border:gray 20px ridge; width:333px; height:500px; filter:revealTrans(transition=23)">
<img id="simg" src="ph2.jpg" style="position:absolute; left:-1000px">
<img id="simg" src="ph3.jpg" style="position:absolute; left:-1000px">

<script>
var imgEls=document.all("simg")
var imgsrc=new Array()
for(n=0;n<imgEls.length;n++){
imgsrc[n]=imgEls[n].src
}

var imgno=0
function slide(){
imgEls[0].filters["revealTrans"].transition=23
imgEls[0].filters["revealTrans"].apply()
imgno=(imgno+1)%imgEls.length
imgEls[0].src=imgsrc[imgno]
imgEls[0].filters["revealTrans"].play()
setTimeout("slide()",5000)
}
setTimeout("slide()",5000)
</script>
</body>
</html>

revealTransフィルタでスライドショー

ここではdurationが設定されていません。省略した場合の初期値は1秒です。

imgEls[0].filters["revealTrans"].duration=3で3秒になることはもう説明不要でしょう。

transitionを0～22にひとつずつ繰上げしながら変更するには？

var trnum=0としておいて、trnum=(trnum+1)%23を入れるといいですね。ここでも剰余は便利です。
%23によって0～22までの値になります。trnumは22になるまで+1ずつ増加します（trnum+1による）。23になると23で割った余りは0なので0に戻ります。

var trnum=0
function slide(){
imgEls[0].filters["revealTrans"].transition=trnum
trnum=(trnum+1)%23
imgEls[0].filters["revealTrans"].apply()
imgno=(imgno+1)%imgEls.length
imgEls[0].src=imgsrc[imgno]
imgEls[0].filters["revealTrans"].play()
setTimeout("slide()",5000)
}

効果タイプをインクリメント・・・詳しくはソースを見てね。

スライドショーをクリックで行うように変更してみましょう。

基本的にはクリックのイベントで関数slide()を実行させればいいかと思います。関数は繰り返しをさせないようにしておけば、クリックごとに関数実行になりますね。

一見は百聞に如かず、やってみましょう。

[ソース]

<HTML>
<head>
<meta http-equiv="content-type" content="text/html; charset=shift_jis">
<META http-equiv="Content-Style-Type" content="text/css">
<title></title>
</head>
<body style="margin:0px; padding:0px;">
<img id="simg" onclick="slide()" src="ph1.jpg" style="position:absolute; left:20px; top:20px; border:gray 20px ridge; width:333px; height:500px; filter:revealTrans(transition=23)">
<img id="simg" src="ph2.jpg" style="position:absolute; left:-1000px">
<img id="simg" src="ph3.jpg" style="position:absolute; left:-1000px">

<script>
var imgEls=document.all("simg")
var imgsrc=new Array()
for(n=0;n<imgEls.length;n++){
imgsrc[n]=imgEls[n].src
}

var imgno=0
function slide(){
imgEls[0].filters["revealTrans"].transition=23
imgEls[0].filters["revealTrans"].apply()
imgno=(imgno+1)%imgEls.length
imgEls[0].src=imgsrc[imgno]
imgEls[0].filters["revealTrans"].play()
}
</script>
</body>
</html>

revealTransフィルタでスライドショー、クリック対策

まあうまくいっているようですが、クリックすると関数即実行になるので、トランジションplay()中にもクリックで関数実行が起きますね。こういう場合は現在play()中であるかを判断させてplay()中でなければ関数実行させるという方法があります。

トランジション系のフィルタにはstatusプロパティがあり、これは0であれば停止中で、1ならapply()中で、2ならplay()中です。ということは①statusプロパティで2の時はslide()を実行させないようにするか、②0の時のみslide()を実行させるのがいいでしょう。

今回はイベントハンドラ内にスクリプトを書いてみます。スクリプトは;で区切れば複数ステートメントを一行に書けることは説明済みですね。

①onclick="if(imgEls[0].filters['revealTrans'].status==2){return}else{slide()}"

フィルタのstatusプロパティが2ならばrerutnする。そうでなければslide()関数を実行する。

revealTransフィルタでスライドショー、クリック対策二重実行防止①

②onclick="if(imgEls[0].filters['revealTrans'].status==0)slide()"

フィルタのstatusプロパティが0ならばslide()関数を実行する。

revealTransフィルタでスライドショー、クリック対策二重実行防止②

次回はMetaCreationsフィルタでランダム・スライドショー、それに使用する写真の説明文も変わるようにしてみます。