背景画像をスライドショー/画像表示/SolidStateEveryday - Ajax,javascript,UIサンプルとチュートリアル -

背景画像jquery.BgImageTransition.js

SAMPLE
CODE
DownLoad

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>BGTransition Demo</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" language="javascript" src="jquery-1.3.2.min.js"></script> 
<script type="text/javascript" language="javascript" src="jquery.BgImageTransition.js"></script> 
<script language="JavaScript" type="text/javascript"> 
$( function(){
    var bgImages = [ '1.jpg', '2.jpg', '3.jpg', '4.jpg' ];
    var currImage = '1.jpg';
    setInterval( function(){
        do{
            var randImage = bgImages[Math.ceil(Math.random()*(bgImages.length-1))];
        }while( randImage == currImage )
        currImage = randImage;
        $('#blaf').BgImageTransition( 'images/'+currImage );
    }, 2000)
})
</script> 
<style type="text/css">
mbody{margin:0}
#blaf{
    position:absolute;
    background-repeat: no-repeat;
    top:0px;
	left:0;
    height:498px;
    width:665px;
    background-image: url(images/1.jpg);
}
#blaf p,#blaf2 p{
  width:200px;
  height:100px;
  position:absolute;
  text-align:center;
  line-height:100px;
  top:100px;
  left:220px;
  background:#FFF;
}
</style>
</head> 
<body> 
<div id="blaf">
  <p>背景画像をアニメーション</p>
</div> 

</body> 
</html>

	Plugins \| jQuery Plugins

背景画像をスライドショーするスクリプト jquery.BgImageTransition.js です。
jqueryを使用しランダムにスライドショーします。
CSSで設定した背景画像の上に新しいボックスを作成して背景画像を上に表示しているため、画像が切り替わるたびに元の背景画像が出現します。
それが嫌な場合、元の背景画像を設定しないようにするといちいち戻りませんが、フェードで背景色が表示されるようになるので一長一短かもしれません。

セッティング

１．ダウンロード/セッティング

ますjQueryをダウンロードし、次にjquery.BgImageTransition.jsをダウンロードしてください。
完了したらそれらをアップロードします。

２．<head>設定

アップしたスクリプトを読み込ませます。

パスは任意で調節してください。

次にスライドショーの設定を記述します。

説明は各コメント部分を参考にして下さい。
#blaf はスライドショーのターゲットとなるボックスのID名です。

３．CSS＆HTMLマークアップ

まずHTMLですが、これは普通にIDつけて記述します。

<div id="blaf">
<p>背景画像をアニメーション</p>
</div>　

次にCSSについては少し注意が必要です。
この背景スライドショーは元のボックスの上に新しいボックスを表示して事を成しているわけですが、
新しいボックスは元のID名と異なるので、#blaf p と設定していた場合適用されません。
新しいボックスのID名は元のボックスのID名に2をつけた #blaf2 といった感じになりますので、
両方まとめて定義すると良いと思います。