javascript - divの背景画像+jqueryのスライドショー

Question

ヘッダーに大きなdiv要素があり、divには多くのテキストコンテンツといくつかのボックスがあります。そして私はこのdivのbgとして大きなimgを持っています、今私はこのdivの背景のスライドショーを作る必要があります：/

divの背景画像のスライドショーを作成するにはどうすればよいですか？

たくさん調べましたが、何も見つかりませんでした：/

どうもありがとう！感謝！

Answer 1

これを行う 1 つの方法は、背景画像の配列を作成することです。

var bgArr = ["img/bg1.jpg", "img/bg2.jpg"]; //and so on...
function backgroundSlide(i) {
    $("#header").css("background-image", "url("+bgArr[i++]+")");
    if (i == bgArr.length) i = 0;
    var st = setTimeout(arguments.callee(i), 1000);
}
backgroundSlide(0)

これはただループしてループします...

Answer 2

私もCSSの背景要素のスライドショーを探していました。ご意見ありがとうございます。setTimeout メソッドを使用してソリューションを調査しましたが、大きな問題がありました (私は初心者です)。

私は peirix のソリューションを setInterval の代替手段で適応させ、これを思いつきました。

var bgArr = ["images/TopImage-01.jpg", "images/TopImage-02.jpg", "images/TopImage-03.jpg" ]; 
var i=0;

// Start the slide show
var interval = self.setInterval("swapBkgnd()", 5000)  

function swapBkgnd() {
 if (i>(bgArr.length-1) ) {
  i=0
  $("#header").css("background-image", "url("+bgArr[i]+")");
 }
 else {
  $("#header").css("background-image", "url("+bgArr[i]+")"); 
 } 
 i++;
};

ここで、フェード効果と画像プリローダーを追加する必要があります。これを達成するためのよりきちんとした方法があるかどうか知りたいです。

Answer 3

以下を使用して、背景画像を変更できます。

$("#mydiv").css("background-image", "url(1.jpg)");

スライドショーを作成するには、settimeout を使用して定期的に呼び出します。