【おやじのweb技】 html/javascript/css等
winXP+IE6
TopPage表示 /  保 存 /  印 刷 /  Window Resize /  Window Close

g003

画像や背景画像を一定時間ごとに入れ替える(スライドショー/停止機能付)
web工房  Copyright(C) 2004 web工房 All Rights Reserved 
このページのトップに戻る /  Window Resize /  Window Close /  最終更新日表示
action
【技g003-1】画像を一定時間毎に入れ替える/表示している画像Noをテキストフィールドに表示する
画像No.

画像
画像が自動的に切り替わらないときは
[開始]ボタンをクリックして下さい
【技g003-2】背景画像を一定時間毎に入れ替える/表示している画像Noをテキストフィールドに表示する
背景画像No.


[開始]ボタンをクリックすると
背景画像が一定時間間隔で替わります
web技

■【技g003-1】画像を一定時間毎に入れ替える/表示している画像Noをテキストフィールドに表示する


◆注意
※「開始」「停止」ボタンをクリックすると、テスキトフィールドやボタンの背景色が変化しますが、下記の解説では省略しています。

◆手順1a【テキストフィールド設置】
※テキストフィールドinputを<body>〜</body>間に作成する
※テキストフィールド(input)は<form>〜</form>内に記述し、name属性を指定する。
※<form>にもname属性を指定する
※value="1":初期値(1枚目=1から)

-----次の行から(copy)-----
<form name="FORM">
<input size="5" type="text" name="MSG" value="1">
</form>
-----上の行まで(copy)-----


◆手順1b【表示画像設置】
※最初に表示する画像を<body>〜</body>間に設置する
※画像にはname属性を指定する
※<img src="">:最初に表示する画像(0.JPG)の相対パスを指定

-----次の行から(copy)-----
<img src="photo/0.JPG" name="IMAGE" width="200" height="150" border="1">
-----上の行まで(copy)-----


◆手順1c【開始・停止ボタン設置】
※「開始ボタン」及び「停止ボタン」を設置する

-----次の行から(copy)-----
<input type="button" name="btn_start" value="開始" onclick="StartSlide()">
<input type="button" name="btn_stop" value="停止" onclick="StopSlide()">
-----上の行まで(copy)-----


◆手順2【スクリプト実行】
※スクリプトを実行する<body〜>間に記述

-----次の行から(copy)-----
<body onload="StartSlide()">
-----上の行まで(copy)-----


◆手順3【javascript】<head>〜</head>間に記述

-----次の行から(copy)-----
<script language="JavaScript">
<!--
var TIMER="3000"; //スライド切替時間(1秒=1000)
var TIMER_ID="-1"; //タイマーID(スライド停止:TIMER_ID=-1)
var FILE="JPG"; //画像の拡張子(統一する)
var FOLDER="photo"; //画像を保存するフォルダ名(相対パス)
var TOTAL="5"; //画像の枚数*/
count=0; //最初の画像名(0から)

function StartSlide() {
  if ( TIMER_ID == -1 ) {
    TIMER_ID = setInterval('ChangeImg()',TIMER); //停止中の場合に実行
}  
}

function ChangeImg() {
  count++;
  count %= TOTAL;
  document.IMAGE.src=FOLDER + "/" + count + "." + FILE; //画像を表示
  document.FORM.MSG.value = count + 1; //画像Noを表示
}

function StopSlide() {
  if ( TIMER_ID != -1 ) {
    clearInterval(TIMER_ID);
    TIMER_ID="-1" //スライド停止中
  }  
}
//-->
</script>
-----上の行まで(copy)-----

■【技g003-2】背景画像を一定時間毎に入れ替える/表示している画像Noをテキストフィールドに表示する


◆要点
※一定時間間隔で「画像」または「背景画像」を切り替える場合、「画像」と「背景画像」はほとんど共通の考え方・共通のスクリプトの使用が可能のです。下記では、相違点のみを解説します。
※「開始」「停止」ボタンをクリックすると、テスキトフィールドやボタンの背景色が変化しますが、下記の解説では省略しています。


◆手順1a【テキストフィールド設置】
※画像の場合と全く同じです
※name属性のみ変えて _B を付しています

-----次の行から(copy)-----
<form name="FORM_B">
<input size="5" type="text" name="MSG_B" value="1">
</form>
-----上の行まで(copy)-----


◆手順1b【背景画像設置】
※最初に表示する背景画像を<body〜>間に記述します
※スクリプスト名を変えています
※<img src="">:最初に表示する画像(0.JPG)の相対パスを指定

-----次の行から(copy)-----
<body style="background-Image=url(photo_B/0.JPG);">
-----上の行まで(copy)-----


◆手順1c【開始・停止ボタン設置】
※「開始ボタン」及び「停止ボタン」を設置する

-----次の行から(copy)-----
<input type="button" name="btn_start_B" value="背景画像切り替え開始" onclick="StartSlide_B()">
<input type="button" name="btn_stop_B" value="背景画像切り替え停止" onclick="StopSlide_B()">
-----上の行まで(copy)-----


◆手順2【スクリプト実行】
※オープンしたときに自動的にスクリプトを実行するには<body〜>間に下記のように記述します
※例示では記述していません

-----次の行から(copy)-----
<body onload="StartSlide_B()">
-----上の行まで(copy)-----


◆手順3【javascript】<head>〜</head>間に記述
※画像の場合とほとんど同じで、異なるのは画像のフォルダ名やname属性の他は //(*)の行だけです

-----次の行から(copy)-----
<script language="JavaScript">
<!--
var TIMER="5000"; //スライド切替時間(1秒=1000)
var TIMER_ID="-1"; //タイマーID(スライド停止:TIMER_ID=-1)
var FILE="JPG"; //画像の拡張子(統一する)
var FOLDER="photo_B"; //画像を保存するフォルダ名(相対パス)
var TOTAL="5"; //画像の枚数*/
count=0; //最初の画像名(0から)

function StartSlide_B() {
  if ( TIMER_ID == -1 ) {
    TIMER_ID = setInterval('ChangeImg()',TIMER); //停止中の場合に実行
  }
}

function ChangeImg() {
  count++;
  count %= TOTAL;
  document.body.style.backgroundImage="url(" + FOLDER + "/" + count + "." + FILE + ")"; //bodyの背景画像変更(*)
  document.FORM_B.MSG_B.value = count + 1; //画像Noを表示
}

function StopSlide() {
  if ( TIMER_ID != -1 ) {
    clearInterval(TIMER_ID);
    TIMER_ID="-1" //スライド停止中
  }  
}
//-->
</script>
-----上の行まで(copy)-----


◆手順4【背景画像のスタイル設定】
※背景画像のをウィンドウの中央に1枚だけ表示するようにしています
※ウィンドウをスクロールしても背景画像は動かないように設定しています(IE限定)

-----次の行から(copy)-----
body {
background-attachment:fixed;
background-repeat:no-repeat;
background-position:center;
}
-----上の行まで(copy)-----

解説等 ◆このページは背景画像を効果的に演出するために他のページと背景画像や文字の背景色の設定を変えています。

◆簡易的なスライドショースクリプトです。画像を指定時間毎に変更します。最後まで表示したら最初の画像に戻って繰り返します。
※「画像」も「背景画像」もほとんど同じ考え方です。

◆事例では判り易くするために「画像番号」も併せて変えるようにしています。
◆「開始」「停止」ボタンを設置しています。
◆htmlファイルと同じフォルダに画像フォルダ(例示は「photo」)を設置し、画像をすべて保存して下さい。
◆画像はサイズ及び拡張子すべて統一し、画像名は 0.JPG 1.JPG ...というように0からはじまる連番とします。
※背景画像は特にサイズ統一の必要はありませんが、同じぐらいのサイズの方がいいと思います。
◆画像名は0からですが、画像番号表示は判り易くするために1からはじまるよう「画像名+1」とテキストフィールドに表示しています。

【適用技】このページの技に適用した他の技です
[技m008]リンク文字にマウスを重ねるとテキストフィールドにメッセージを表示する
[技g002]背景画像を1枚だけ表示する
[技g010]ウィンドウをスクロールしても背景画像は動かない(固定)する

【応用技】
[技g011]画像をワイプして入れ替える
※画像が入れ替わるときワイプさせることもできます。ちょっとおしゃれです。

key word ◇setInterval()◇input

history

◇(2004.10.03)一定時間毎に背景画像を入れ替える技を追加しました。
◇(2004.09.26)[技g011]画像をワイプして入れ替える、に関する情報を追加しました。
◇(2004.06)設置
注意 ◆操作MENUの[Window Resize]を選択するとウィンドウサイズが変更可能です。
◆上記の[web技]をクリップボードにコピーしテキストエディタに貼り付けて使用する場合は、表示のための改行記号や全角・半角スペースの記号等を削除して下さい。
-----次の行から(copy)-----
(この部分をクリップボードにコピーしてテキストエディタ等に貼り付けて下さい)
-----上の行まで(copy)-----