← designg.info トップページに戻る(文字を中心にしたページ)← designg.info トップページに戻るdesigng.info トップに戻る→HTML トリック リスト一覧→ページにスパイス
サイトマップへ
サイトの使い方
カラフル・セレクティブその他(リンクなど)コミュニケーション(掲示板・ウェブログ)ダウンロードイントロデュースサイトのカラーリングアイディアノート ページにスパイス
いくつかの画像データを表示するときに、一定時間の間隔を置いて次々と表示が出来るTips。GIFアニメーションと違い、最初の画像を表示している間に次の画像データを読み込むので、ストレスなく閲覧が可能。
ちなみに、使用する画像は同じサイズにまとめておくといいですよ。

画像データを一定時間ごとに切り替えて表示する

 

▼下準備

まずは連続表示する画像を用意しておきます。
この時に、「image1」「image2」「image3」…といったように、
任意の文字列+数字といったファイル名にしておきます。
さらに、
全部の拡張子を同じにしておきます。

(例) change1.jpg change2.jpg change3.jpg

もちろん、GIFもPNGでもかまいません。

body?‡

<BODY onLoad="setTimeout('timer()',3000);">
<
IMG SRC="sample1.jpg"NAME="img">
<SCRIPT LANGUAGE="Javascript">
  var num=2;
  function timer(){
    if(document.img.complete){
    
document.img.src="sample"+num+".jpg";
    
num++;if(num>5)num=1;
    }
  setTimeout('timer()',
3000);
  }
</SCRIPT>

これもジャバスクリプトを使っているわけです。では解説。

<IMG SRC="sample1.jpg">のところは画像をページに入れるときのタグです。
一番最初に(そのページを読み込んだときに)表示したい画像をここで指定しておきます。
1行目の <BODY onLoad="setTimeout('timer()',3000);"> の部分で、次の画像を表示するまでの時間を設定します。
また、最後から3行目の setTimeout('timer()',
3000); の部分にも同じように時間を記入します。
単位は「数字÷1000=秒」つまり、
3000だと3秒です。
その次に7行目の document.img.src="sample"+num+".jpg"; を変更します。
「sample」の部分は表示する画像のファイル名です。また、その後ろの「.jpg」は拡張子。
注意! 拡張子をgifとかに変える場合、「.」(ピリオド)を忘れずに付けて下さいね。.がないだけで、エラーになります。

また、その次の8行目、 num++;if(num>5)num=1;の部分を必要に応じて変更します。
num>5 の数字の部分を、「表示させる画像の枚数」に変更してください。

説明が長くなりましたが、これだけの変更をしておけば、いよいよ設置完了。

普通でしたら、3000〜6000(3秒〜6秒)位がちょうどいいですので、じっくり見せたい絵とかでもない限り、間隔は短めに致しましょう。

「表示させる画像の枚数」

12枚使うんだったら、num>12 という具合にです。

結果はこちらへ

ページの上へ
このサイトの制作者、takkaについて。これから先にこのサイトに掲載する予定の企画やコンテンツをこのページで紹介していますインフォメーションメールの受付やオンラインの確認はこちらからどうぞサイトマップへ
コピーライト