Step.65 - 定期的に画像を変更する(スライドショー)


周期的に表示画像を変更するスライドショー機能とか アニメーションGIFもどき をやってみます。


Step テーマ
● とくになし

実行例





リスト


<script type="text/javascript"><!--
myImage = new Array(// 画像ファイル名の設定
"kuji0.gif",
"kuji1.gif",
"kuji2.gif",
"kuji3.gif"
);
myNowCnt = 0;// 現在表示している画像番号
function myChange(){// 定期的に画像を更新する関数
    if (myNowCnt == myImage.length-1){// 最後の画像まで表示したのなら
        myNowCnt=0;// 最初の画像に戻す
    }else{// 最後の画像まで表示していないのなら
        myNowCnt++;// 次の画像へ
    }
    document.sshow.src = myImage[myNowCnt];// 次の画像を表示する
    setTimeout( "myChange()" , 1000 );// 1秒周期に画像を更新する
}
// --></script>
<img src="kuji0.gif" width="50" height="100" name="sshow">
 <script type="text/javascript"><!--
 myChange();
// --></script>

サンプルだけの HTMLは こちらへ

説明


複数の画像の表示を切り替えて、スライドショーを作ってみます。

サンプル画像は、Step.50〜Step.52 で使った、おみくじ画像です。（いわゆる、使いまわし) (^^;
これを順番に表示してみます。

今回のサンプルも特に目新しいことは、やっていません。プログラムの横に書いたコメント文で説明は十分でしょうか？
配列にセットした画像URLを順番に表示していき、最後まで表示したら、再び最初から画像を表示します。
次の画像を表示する時間は setTimeout 内で指定しています。(サンプルは1秒)

なんか地味だなぁ と思う方は、Step.103へ。

myChange() を呼ぶタイミングは、
<img src="kuji0.gif" width="50" height="100" name="sshow">
 の記述の後でなければいけません。
この記述より前にmyChange()を呼ぶと、まだ、sshow が設定されてない、つまり、どこに画像を表示していいか分からないのでエラーを起こしてしまいます。


サンプルの画像
kuji0.gif kuji1.gif kuji2.gif kuji3.gif
presidentさんが、画像サンプルを作ってくれました。感謝 m(_ _)m


● 参考ステップ
Step.2 あいさつ文を表示してみましょう　配列:Array
Step.28 オープニングロゴを作ってみましょう　setTimeout
Step.33 マウスカーソルが触れたら画像を変えてみましょう　画像の変更:document.<name>.src
Step.103 フェード効果のあるスライドショーを作ってみましょう　スライドショー

● リファレンス
Array
setTimeout
▲TOP

Q&A 1


Ｑ: 画像が一周したら、最後の画像で止めるということもできますか？
Ａ: myChange() を下記に変更してください。

function myChange(){
if (myNowCnt != myImageCnt){// 最後の画像まで表示していないのなら
document.myFormImg.src = myImage[myNowCnt];// 画像を表示する
myNowCnt++;// 次の画像へ
setTimeout( "myChange()" , 1000 );// 1秒周期に画像を更新する
}
}

▲TOP