次に、最も核となる部分である JavaScript プログラムの作成に取り掛かります。私たちのアイデアは、画像のグループ (複数の画像) を定義できるということです。ページが表示されると、最初の画像が最初に表示され、2 番目の画像が読み込まれてから 5 秒後に 2 番目の画像がプリロードされます。このとき、3 番目の写真がプリロードされており、5 秒以内に 3 番目の写真に自動的に切り替わり、再生が続行されます。最後のものが再び最初から始まるまで。もちろん、これは自動的に再生されます。ユーザーが手動で順方向および逆方向に再生することもできます。
まず最初に解決しなければならない問題は、画像のプリロードです。これは、切り替えプロセスのスムーズさと再生プロセスの完璧さを左右します。画像をプリロードするのは非常に簡単です。メモリ内に画像の新しいインスタンス変数を作成し、その変数を画像に指定するだけです。これにより、ブラウザが画像を自動的にロードします。プリロード中。 JavaScript で書くと次のようになります:
var myImage = new Image()
myImage.src = "someImage.gif"
次に、画像が読み込まれているかどうかも知る必要があります。ロードされている場合は表示します。ロードされていない場合はエラーが発生します。したがって、上記のコードを変更して 2 つのステートメントを追加する必要があるため、この JavaScript は次のようになります:
var img = new Image()
img.onload = doReadyImage
img.onerror = doErrorDisplay
img.src = "someImage.gif"
イメージの onload イベントと onerror イベントを追加しました。これらは、それぞれプリロードおよびプリロード エラー イベントを行うかどうかを表します。これら 2 つの文は img.src ステートメントの前に置く必要があります。そうしないと、画像のプリロードが失敗します。
最後のステップは、画像切り替えプログラムです。以前、CSS のフィルター変換フィルターのさまざまな効果を確認しました。ここでは、コード名 23 のランダム効果を使用します。以下は、JavaScript プログラムでこの効果を作成したものです
。画像.スライドショー.フィルター)
{
document.images.slideShow.filters[0].Stop()
document.images.slideShow.filters[0].Apply()
// ランダムなトランジション効果を使用します document.images.slideShow.filters.revealTrans.transition=23
document.images.slideShow.src
= sSource
//変換エフェクトの実行開始
if (document.images.slideShow.filters)
document.images.slideShow.filters[0].Play()