画像・広告(文字・画像)等を一定時間で差し替える方法です

この方法は、ドキュメントのタグに対して innerHTMLと言う方法を用いて行う方法です。
方法的には 広告切替１の様にJavaScript側に設定したデータを表示させますが、 画像だけではなく文字列なども可能であると言う点だけ違います。

これがあるなら画像のみの方法は本当は要らないとも言えるのですが、 広告切替１の画像のみの方法の場合は、全ての画像を先読みさせてるので、 画像のみの広告なら広告切替１を使う方が無難と言えます。
設定が楽なのはこっちの方かもしれませんが。。。

サンプル

---

5秒毎に広告が入れ替わります。
IE4、NN6、FireFoxなどを使ってる方には広告切替２と出来栄えは全く同じです。 文字が扱える点も見栄え的には２と同じです。

ソース と 解説

---

■ [ HEAD内に貼り付けるスクリプト 要設定 ]
<script type="text/javascript"> var ADC = { /* ↓設定１ 表示する広告。 []内に '広告ソース' を カンマで区切って並べる。長い場合 区切りのカンマ, 直後の改行は可能 */ sorc:['広告ソースHTML','広告ソースHTML','広告ソースHTML'] , /* ↓設定２ 表示用画像タグのID '' で囲む */ id:'banner' , /* ↓設定３ 切替時間 1000 = 1秒 */ sec:5000 , /* ↓設定４ ループ 0:しない 1:する */ loop:1 , /* 設定終り */ set:function(O){ var by = function(id){ if(document.getElementById && document.getElementById(id) ){ return document.getElementById(id) }else{ if( document.all && document.all(id)) return document.all(id) } }; if(!by(O.id)){ return false; } if(O.Tid){ clearTimeout(O.Tid); } O.now =-1; var CHG = function(){ if(++O.now >= O.sorc.length || !O.sorc[O.now]){ if(!O.loop){ return false; } O.now = 0; } by(O.id).innerHTML = O.sorc[O.now]; O.Tid = setTimeout(CHG, O.sec); };CHG(); },add:function(obj, type, func){ if(obj.addEventListener){ obj.addEventListener(type, func, false); }else{ if(obj.attachEvent) obj.attachEvent('on' + type, func); }},Tid:undefined }; ADC.add(window, 'load', function(){ ADC.set(ADC) }); </script>

■ [ 広告を表示する場所のタグ ]
DIVタグなどのブロックタグで、広告HTMLを挿入する場所を1箇所作ります。 <div id="banner"> 最初に表示する広告ソース </div>

---

■ [ 使い方 ]
広告表示場所にDIVやテーブルタグなどのブロックタグを作ってIDをつけます。
最初に表示するソースをその中に書き込んでおきます。
このスクリプトが動作しない(結構)古いブラウザの為にもなります。


HEAD内にスクリプトを貼り付けて設定を行います。

設定１
表示させる広告ソース(HTML文字列)を書式に沿って書き込んでください。
各データはシングルクォートで囲み、それぞれをカンマで区切って並べていきます。
シングルクォートの中にはシングルクォートを使えませんので、 中に使うクォートはダブルにしてください。 どうしてもシングルが必要な時は、『 \' 』と書き込んでください。 行末に『;』など余計な物をつけないでください。
sorc:['表示HTML','表示HTML','表示HTML']

sorc:['ながーくなるような表示HTML',
'ながーくなるような表示HTML',
'ながーくなるような表示HTML']
広告ソースLが長い場合は、この様にカンマの後に改行を入れて見やすく整理。

設定２
表示場所のDIVやテーブルタグのID　(初期ソースを囲んでるブロックID)
文字列ですのでID名を ''で囲んでください。
id:'banner'

設定３
秒数設定。 1000 = 1秒です。
sec:5000

設定４
ループ設定。 0:ループしない 1:ループする
loop:1

以上で終わりです。

その他

---

■ウィンドウのオンロードイベント
このスクリプトはwindowのonloadイベントでスタートします。 このウィンドウのオンロードイベントはメソッドでつけてありますので、 メソッドが理解できない下位ブラウザを切り捨てる代わりに、 他のスクリプトで同じイベントが設定されていてもイベントが干渉しあう事がありません。

■グローバル変数
グローバル変数名・関数名と使用してるのは ADC 1個です。
この ADC が他のスクリプトと同じで干渉してしまう場合は、 この配布スクリプトの中の全部のADCという文字列を別の名前に変更するか、 グローバル変数を使わない方法(下記)に変更してください。

■グローバル変数を排除
次ぎの様に書き加える。
;(function(){

配布スクリプト

})();

この様に、配布スクリプトの前後の行に追加で書き込みをする事で、 無名関数オブジェクトの実行方法で起動できます。 これならADCもローカル変数になり干渉がなくなります。

複数ページで『共通外部ファイル+別設定』で使う場合はこの方法は使えません。

■複数のページで楽に表示させたい。
配布スクリプト(SCRIPTタグを除く)をJSファイルにして外部ファイルとして読み込ませる事で、 どのページでも同じ設定の広告差し替えを簡単に使えてJSファイル1個で設定や変更が済ませられます。
各ページに広告ブロックのDIVタグとスクリプトの外部ファイル指定は必要です。
<script type="text/javascript" src="JSファイル指定"></script>

『複数ページ+同一設定』で使う場合はグローバル変数を使わない方のスクリプトを使う方が、 後々の管理も含めトラブルがおきにくいと思います。

■複数のページで共通ファイルを使うが広告や設定は別にしたい。
この場合はグローバル変数を使わない方は無理なので、グローバル変数ADCの干渉にだけ気をつけてください。 配布スクリプトのADCを20文字くらいの、今後干渉する事がありえない文字列に変えておく方がのちのちの予防にもなります。

まず複数のページで楽に使う方法と同じで利用するページに全て読み込ませるようにします。 その上で配布スクリプトより下で、設定項目を上書き設定します。
この様に、設定を変更する目的の ADCのsorcプロパティ(配列)やその他のプロパティなどを 後から書き換えてしまう形で記述します。 これは代入なのでADC.xxx = のような形式で目的の設定名に対して新しい値を代入してください。
これはあくまでも、画像ファイルやリンクURLだけ などの様に一部をページ毎で変更する場合などに使います。 が、共通で使うスクリプト側を一切設定せずに、全ての設定項目をこの様に各ページで上書き設定変更するという方法もあります。 その為にオブジェクトの形で組んでありますので、管理しやすい方で。

■１つのページで複数使いたい。
グローバル変数を使わない方法にするか、増やすごとに配布スクリプトのADCの名前を1つのスクリプトをセットとして変更するようにして、 複数をページに埋め込めば使えます。
外部ソースの場合も別ファイルにしても同じファイル内に複数記述してもOKです。 それぞれ必要な設定をするだけで動きます。 設定2の表示先のIDは必ずそれぞれ変えないと意味がないですよ。
このページでも実際に配布スクリプトをHEAD内に2個つけています。

■複数のページで共通にしながら1ページで更に複数・・・
この場合は、グローバル変数を1個使う方法で行います。
複数のページで共通ファイルを使いながら設定は変える方法でまず1個目をつけていしまいます。 その方法で使ったスクリプトのADCの名前を別の名前に全て変更した物を2つ目として 全てのページに読み込ませて、ターゲットの画像タグや設定も別にして書き込みます。

■ページ内の簡易スライドショートして使いたい。

起動を別のイベント起動にしたい場合( windowオブジェクトのイベント以外)は、 安全の為にwindowがロードしてからイベント付加をします。
ADC.add(window, 'load', function(){ ADC.set(ADC) });
を次の例の様に変更して赤い時の部分のオブジェクト(イベント発生エレメント)とイベントタイプ(イベントハンドラーからonを取った物)だけを目的の物に変更してください。

例：document で onclick で始動
ADC.add(window, 'load', function(){ ADC.add(document,'click',function(){ ADC.set(ADC); }); });

例：
IDが btn1 というボタンをクリックしたら始動
ADC.add(window, 'load', function(){ ADC.add(document.getElementById('btn1'),'click',function(){ ADC.set(ADC); }); });

と言った感じで、ウィンドウがロードされたらの条件の中で ADC.addを使ってイベントを追加します。
( ADC.add()はattachEvent() または addEventListener()を実行します ）

---

この方法は DIV(サンプルはID=banner)と言うブロックの中の文字列(テキストやHTML)を、 DIVのinnerHTMLと言う指定でJavaScriptで書き換える方法です。
古いブラウザに関しては判定で無視されますので問題なく最初に表示される広告がずっと表示されます。

---

説明では広告ソースを設定してくださいと書いてありますが、 広告に限らずただのテキストを入れれば普通のインフォメーション表示としても使えます。 特定のインフォメーションエリアのブロックタグにIDをつけて、そのIDをスクリプトの方に指定。
sorc:['インフォ','インフォ','インフォ']にすればインフォメーションを切替表示させる事が可能です。

---

例えばこの様に細身の小さなブロックにする事で、 FC2ブログの様な改造自由度の高いブログなら、 ブログパーツとしてループ表示させて使う事もできます。
グローバル変数を使わない方法ならブログのような自分で全てを管理できない場所でも、影響が出にくくなります。 他のスクリプトが共存を考慮してコーディングされていない場合は影響を受ける場合もありえます。

---