Перебирайте фоновые изображения в JQuery - PullRequest
Новая
       15

Перебирайте фоновые изображения в JQuery

1 голос
/ 19 июля 2011

По сути, мне нужен простой способ менять фоновое изображение страницы каждые 5 секунд и с эффектом затухания. Проблема, с которой я столкнулся, заключается в том, что я хочу сделать это, используя мой основной тег body, и у меня есть этот CSS: 

body {
  background: url("images/bg-home.jpg") no-repeat scroll center top #000000;
}

Таким образом, цикл должен изменить этот div на bg-home-1.jpg, bg-home-2.jpg и т. Д., И это должно быть динамическим, поскольку каждая страница имеет различное количество изображений, поэтому я не может использовать этот способ: 

  <div id="fading-images"> 
    <img src="img/home-1.jpg"> 
    <img src="img/home-2.jpg"> 
    <img src="img/home-3.jpg"> 
      </div> 
setInterval(function(){
    $('#fading-images:first-child').fadeOut('slow')
     .next('img').fadeIn('slow')
     .end().appendTo('#slideshow');}, 
     4000);

}

Надеюсь, кто-нибудь может мне помочь:)

1 Ответ

3 голосов
/ 19 июля 2011

скрипка: http://jsfiddle.net/G3Fyv/3/

html: 

<html>
    <body>
        <div id="fader"></div>
        <div id="background" class="img1"></div>
    </body>
</html>

javascript: 

$(document).ready(function() {

    var $fader = $("#fader");
    var $bg = $("#background");
    var cur_img = 0;
    var img_num = 5;

    setInterval(function () {
        var next_img = (cur_img === img_num - 1) ? 0 : cur_img + 1;
        $fader.removeClass().addClass("img" + cur_img.toString()).css("display", "block").fadeOut(2000);
        $bg.removeClass().addClass("img" + next_img.toString());
        cur_img = next_img;
    }, 5000);
});

css 

.img1 { background-color: red; }
.img2 { background-color: green; }
.img3 { background-color: blue; }
.img4 { background-color: yellow; }
.img5 { background-color: grey; }

.bg_div {
    position: absolute;
    width: 100%;
    height: 100%;
}

#background { 
    z-index: 1; 
    position: absolute;
    width: 100%;
    height: 100%;
}
#fader { 
    z-index: 2;
    position: absolute;
    width: 100%;
    height: 100%;
}
...