Crossfaderを使う

それでは実際にCrossfaderを使ってみましょう。まず、Crossfaderのスクリプトを読み込ませます。

<script type="text/javascript" src="js/bsn.Crossfader.js"></script>

Crossfaderではフェード処理する要素にid属性を使って名前を割り当てておく必要があります。要素は<div>タグに限らず、ほとんどのHTMLタグを処理対象として指定することができます。idで名前を割り当てたら、以下のようにページが読み込まれたときフェード処理を開始するようにします。

window.onload = function(){
    new Crossfader( ["処理対象のid名","処理対象のid名",..., "処理対象のid名"], フェード秒数, 待機秒数 );
}

Crossfader()の最初のパラメータには配列形式で処理対象となるタグのid名を列記します。2番目のパラメータはフェード開始から完了までの時間をミリ秒で指定します。3番目のパラメータはフェードが完了してから次のフェード処理が開始されるまでの時間をミリ秒で指定します。サンプル01ではフェード秒数を1秒、次のフェードが開始されるまでの時間を5秒にしています。

サンプル01の実行結果

写真がフェードアウトしながら

変化してゆく

サンプル01

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>Crossfaderサンプル</title>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <script type="text/javascript" src="js/bsn.Crossfader.js"></script>
        <script type="text/javascript"><!--
            window.onload = function(){
                new Crossfader( ["img001","img002","img003"], 1000, 5000 );
            }
        // --></script>
    </head>
    <body>
    <h1>Crossfaderサンプル</h1>
    <div>
        <img id="img001" src="photo/001.jpg" width="384" height="216" alt="富士山">
        <img id="img002" src="photo/002.jpg" width="384" height="216" alt="夕焼け">
        <img id="img003" src="photo/003.jpg" width="384" height="216" alt="富山湾">
    <div>
    </body>
</html>