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

この方法は、CSSの『display:none』と言う方法を用いて行うベタな方法です。
この方法の場合、画像だけではなく文字なども差し替えが可能です。
HTMLブロックををJavaScriptが操作するだけなので設置が非常に楽です。

CSSを理解しないブラウザでは全てが表示されてしまい、あまり良い方法ではないのですが、 簡単なHTMLが理解できればミスがほとんど無く使える楽な方法です。

サンプル

---

5秒毎に広告が入れ替わります。
IE4、NN6、FireFoxなど普通のPCブラウザを使ってる方には広告切替１と出来栄えは全く同じです。
広告切替１が画像専用なのに対して、こちらは文字も含めて差し替えも可能です。 文字広告やクリック率が高くなる説明付バナーにする事が容易にできます。

ソース と 解説

---

■ [ HEAD内に貼り付けるスクリプト 要設定 ]
<script type="text/javascript"> var ADC = { /* ↓設定１ 各バナーを囲むDIVタグのID名の共通部分 */ grp:'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) } }; var disp = function(val){ if(by(O.grp + O.now)){ by(O.grp + O.now).style.display = val; } }; if(O.Tid){ clearTimeout(O.Tid); disp('none'); } O.now = 0; var CHG = function(){ disp('none'); if( by( O.grp + (O.now+1) ) ){ O.now++; }else{ if(O.loop){ O.now = 1; }else{ disp('block'); return false; } }; disp('block'); 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のIDは必ず統一した名前+数字 で 1からの連続番号にする。
styleはインラインではなくクラス指定でdisplay:none;でも構わない。
一番最初に表示するDIVだけは display:block; にする方が自然。
<div id="banner1" style="display:none;"> ココに広告ソースや文字列など </div> <div id="banner2" style="display:none;"> ココに広告ソースや文字列など </div> <div id="banner3" style="display:none;"> ココに広告ソースや文字列など </div> ・ ・ ・ ・

---

■ [ 使い方 ]

HTML内の広告のソース
BODY内の広告を表示する場所に、前述の広告ソースの書き方に従って広告を全て書き込みます。 最初に表示する広告だけは、display:blockにしておき見えるようにしておきます。

HEAD内にスクリプトを貼り付けて必要な設定をします。
オブジェクト表記なので 『 = 』などは使いません。
赤い所だけ設定して、行末には『 ; 』をつけないでください。

設定１ DIVのIDの共通部分の名前
文字列なので '' で囲む。
grp:'banner'

設定２ 切替時間
数値なのでそのまま数字。 1000 が 1秒です。
sec:2000

設定３ ループ
0がループしない。 １がループする。
loop:1


以上で動きます。

その他

---

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

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

■グローバル変数を排除
次の様に書き加える。

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

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

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

この配布スクリプトの方式は広告ソースが各ページ内に書き込まれているタイプですから、 JavaScriptはそれらの広告の表示・非表示のコントロールをタイマーで実行するだけです。 『複数ページ+同一設定』で使う場合はグローバル変数を使わない方のスクリプトを使う方が、 後々の管理も含めトラブルがおきにくいと思います。

このスクリプトはデータをスクリプト内に書き込まない為、 無駄なスペースや改行を全て取り去れば1行にまとめる事も可能です。 (このページのHEAD内で1行にして書き込んであります)

■複数のページで使うが、秒数や設定を別にしたい。
この場合はグローバル変数を使わない方では使えません。
まず複数のページで楽に使う方法と同じで利用するページに全て読み込ませるようにします。 その上で配布スクリプトより下で、設定項目を上書き設定します。
の様に必要な設定箇所を上書きする形で指示を書き込みます。
これは代入なのでADC.xxx = のような形式で目的の設定名に対して新しい値を代入してください。
これはあくまでも、一部の設定をページ毎で変更する場合などに使います。 が、共通で使うスクリプト側を一切設定せずに、全ての設定項目をこの様に各ページで上書き設定変更するという方法もあります。 その為にオブジェクトの形で組んでありますので、管理しやすい方で。

■１つのページで複数使いたい。
グローバル変数を使わない方法にするか、増やすごとに配布スクリプトのADCの名前を1つのスクリプトをセットとして変更するようにして、 複数をページに埋め込めば使えます。
外部ソースの場合も別ファイルにしても同じファイル内に複数記述してもOKです。 それぞれ必要な設定をするだけで動きます。 設定1の表示切替のグループのID(各広告ソースを囲んでるDIVのIDの共通部分)は当然変えないと、意味が無いです。

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

■簡易スライドショートして使いたい。
DIVを操作するだけですから、その中が普通の画像だけであればスライドショーになります。

起動を別のイベント起動にしたい場合( 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で個々に囲んで表示すべき場所に全て書き込んでしまいます。 その上でCSSの display:none を使って不可視にしておきます。
JavaScriptの動作で1個ずつ順に display:block にして表示させる事で入れ替わってるように見えるだけです。
結構古いブラウザやPC用ではないレベルのブラウザなどで CSSの display:none を解釈できないブラウザだった場合、 書き込んだ広告が全て可視になってならんで表示されてしまいます。 古いブラウザを考慮しない場合は、これでも十分です。
HTML内にある要素を操作するだけなのでド素人でも記述ミスなどが起きにくい物です。

注意：
JavaScriptはウィンドウがロード済になってから起動します。
従ってBODY内に複数書き込んである全ての広告、コンテンツの読込が終わらないと起動しません。 他のサーバーにある画像などを読み込む場合もその画像がロードされるか画像不明の結果が返ってくるまでは 全体のウィンドウがロード済にならず起動が遅れます。

このページのソース、HEAD部分で実際に使っています。

---