４月にやった「スライドショーを作る」の応用編です。
画像を自動的に入れ替える
| 今回の効果は、９９年４月にやった「スライドショーを作る」を応用したもので、自動的に画像を入れ替えるというものです。 ４月にやったものは、ボタンをクリックすると画像が変わるというものでしたが、今回は、ボタンは表示されていません。ボタンで画像を切り替えなくても自動的に次の画像を読み込んでいきます。 ＪａｖａＳｃｒｉｐｔを使用していますが、複雑ではないので挑戦してみて下さい｡ 今月も少しだけこの実験にお付き合い下さい。 |
 ポイント | var num = 589;で、２番目に読み込む画像を指定し、num++;if(num>592)で最後に読み込む画像まで、１つずつ画像のファイル名を増やしていきます。 画像のファイル名は連番にしておく必要があります。 （今回は、５８８．ｇｉｆから５９２．ｇｉｆまでにしてあります。） |
 効果 | onload="setTimeout('timer()',3000);"でタイマーを呼び出し、３秒ごとに num に入るファイル名更新していきます。最後まで更新したら、num=588 に入れたファイル名の画像（一番最初に表示される画像。ここでは、５８８．ｇｉｆになります。）に戻ります。 |
 使い方 | 実際の実験画面のソースをご覧下さい。 |
今回の実験でわかったこと
| この効果は、Ｎｅｔｓｃａｐｅ３．０、Ｅｘｐｌｏｒｅｒの４．０からできます。 複数の画像を順番に次々と読み込んでいくので、画像のファイル名を連番にしておく必要があります。 画像を用意する時に画像の高さと幅のサイズを全部同じにしておいた方がいいでしょう。 ＜ＢＯＤＹ＞タグの中の onload="setTimeout('timer()',3000);" の ３０００という部分を増やしたり減らしたりすることで次の画像を読み込むまでの時間を調節できます。 ぜひ試してみて下さい。 |
ご意見などありましたらメールを送って下さい。お待ちしています。
(E-mail:hiroko@ladys-page.com)
