JavaScriptを使って背景画像を切り替える

JavaScriptを使って背景画像をスライドショーのように一定間隔で切り替える方法を紹介します。
切り替え画像としてimg1.jpg,img2.jpg,img3.jpgを用意します。

<!--html-->
<div id="wrapper"></div>

//JavaScript
$(function() {
  var i = 1;
  setInterval(function() {
    if(i > 3) i = 1;
    $("#wrapper").css("background","url('./images/img"+i+".jpg')");
    i++;
    }, 4000
  );
});

ちょい説明

• setIntervalは一定時間で関数を呼び出してくれます。今回は関数の呼び出し間隔を4秒に設定しています。
• 関数の内容はidがwrapperの要素の背景をimg～.jpgに設定しています。
• if文の3は切り替える画像の数です。

簡単ですね^^