サイトのトップページが表示される前に画像を1枚スクリーンいっぱいに表示させたいと思います。

書いてみました。jQuery を使ってます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
var T_DISP = 1000;      // 画像を表示する時間 (ミリ秒)
var T_FADE_OUT = 2000;  // 画像をフェードアウトで消す時間 (ミリ秒)

/* 表示に使う画像の URL (複数) */
var images = [
    "http://cdn-ak.f.st-hatena.com/images/fotolife/a/a-kuma3/20130211/20130211203309.jpg",
    "http://cdn-ak.f.st-hatena.com/images/fotolife/a/a-kuma3/20121104/20121104140222.jpg",
    "http://cdn-ak.f.st-hatena.com/images/fotolife/a/a-kuma3/20130407/20130407123951.jpg"
    ];
$(function() {
    var img = images[ Math.floor(Math.random() * images.length) ];
    $("#cover").attr("src", img).delay(T_DISP).fadeOut(T_FADE_OUT);
});
</script>
<style>
#cover {
    position: absolute;
    top: 0;
    left: 0;
}
</style>

<!-- トップページに被さって表示される画像用のエリア -->
<img id="cover">

<!-- トップページの内容をつらつらと... -->
<div>
<h1>トップページ。</h1>
こんなことや<br>
あんなこと
</div>

トップページが表示されてから、１秒画像を表示して、その後、２秒かけて画像がフェードアウトします。
画像は、ぼくのフォトライフから適当に三つ選んでますが、いくつでも設定できます。


動いてるものを見た方が、感じが分かりやすいと思うので、jsFiddle に置いてみました。
http://jsfiddle.net/a_kuma3/6C6Q3/embedded/result/