結構前に公開されているので、すでに使っている人もいるかと思いますが、最近、個人的な用途で使わせていただいたので紹介。
Brand Spanking New で公開されている、「Javascript / CSS Crossfader」 は、JavaScript ひとつで簡単に、任意の div 要素 （じゃなくてもいいんですが） をクロスフェード表示で切り替えてくれるスクリプト。スクリプト自体が軽いのと、設定も簡単なので、ちょっとした画像の切り替えなんかに重宝しそう。
デモがこちらで公開されています。
必要なのは JavaScript ファイル 1つのみ。ダウンロードした JavaScript ファイルをサーバに上げたら、(X)HTML ファイルに読み込みます。
<script type="text/javascript" src="/js/bsn.Crossfader.js"></script>
切り替える (X)HTML ソースは下記のように。
<div id="cf1"> <p>first content</p> </div> <div id="cf2"> <p>second content</p> </div> <div id="cf3"> <p>third content</p> </div>
必ずやらなければいけないのは、id 属性を任意で付けるってことだけ。この id 属性値が切り替え設定時に必要なので、切り替え順などで適当に名前付けておきます。
<div id="value"> ･･･ </div>
最後に、
var cf = new Crossfader( new Array('cf1','cf2','cf3'), 500, 2000 );
という形で、切り替えの順番とタイミングを記述してあげます。
new Array('cf1','cf2','cf3'),
この部分が、先ほど付けた id 属性値になります。左から記述した順に表示されます。
500, 2000
最後の数字は、各 div 要素の切り替わるタイミングです。この例だと、
cf1 → cf2 ： 500ms
cf2 → cf3 ： 2000ms
2月18日 追記
すいません。上記の説明は間違いです。正しくは下記です。（rytich さんコメント感謝）
The constructor takes three variables: an array containing the ids of the divs to be faded, the fade time (in milliseconds), and the delay between fades (also in milliseconds).
- フェードエフェクトの時間 ： 500ms
- 各 div 要素の表示時間 ： 2000ms
この記述は下記のように、(X)HTML ファイルに直接記述でもいいですし、
<script type="text/javascript">
var cf = new Crossfader( new Array('cf1','cf2','cf3'), 500, 2000 );
</script>
外部ファイルに記述して、下記のように読み込んでも OK です。
<script type="text/javascript" src="/js/setting.js"></script>
あとは、CSS で見た目を整えれば完成。
