【おやじの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]画像や背景画像を一定時間毎に入れ替える
のjavascriptの部分のみを一部｢画像ランダム表示｣用に修正したものです。
 従って、[技g003]との変更点のみ解説します。
【技g012-1】画像を一定時間毎にランダムに入れ替える/表示している画像Noをテキストフィールドに表示する
画像No.

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


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

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

◆以下の手順は[技g003]と全く同じですので、[技g003]を参照して下さい。 ※手順1a【テキストフィールド設置】(画像Noを表示するためのテキストフィールドの設置)
※手順1b【表示画像設置】(表示する画像の設置)
※手順1c【開始・停止ボタン設置】
※手順2【スクリプト実行】(スクリプトを実行する)

◆手順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=Math.floor(Math.random()*TOTAL);
　　　　//[技g003]とこの行が異なります(countの算出方法)
　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をテキストフィールドに表示する

◆以下の手順は[技g003]と全く同じですので、[技g003]を参照して下さい。 ※手順1a【テキストフィールド設置】(画像Noを表示するためのテキストフィールドの設置)
※手順1b【表示背景画像設置】(表示する背景画像の設置)
※手順1c【開始・停止ボタン設置】
※手順2【スクリプト実行】(スクリプトを実行する)
◆手順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=Math.floor(Math.random()*TOTAL);
　　　　//[技g003]とこの行が異なります(countの算出方法)
　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限定)
※詳細は、[技g003]を参照して下さい。
解説等 ◆このページは背景画像を効果的に演出するために他のページと背景画像や文字の背景色の設定を変えています。

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

◆画像を指定時間毎にランダムに変更します。
※｢画像｣も｢背景画像｣もほとんど同じ考え方です。
◆画像の設置方法等は[技g003]の解説を参照して下さい。

◆ランダムな数値の計算方法
※Math.randam()
　　0〜1までの乱数を返します。
　　本技のような使い方では、返された乱数を「整数化」する必要があります。
※floor(n) 　　小数点以下を切り捨てた整数を返します。
　　例示では整数化するのにn=Math.randam()*TOTAL(TOTALは画像枚数)としています。
　　これによって画像番号は0〜(TOTAL-1)に相当する整数が同じ確率で返ります。

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

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

history

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