web-dev-qa-db-ja.com

jqueryでフェード効果を使用してボディの背景画像を変更する

60秒ごとに新しい背景画像をフェードインさせたいと思います。背景画像を次のように設定しました。

body {background-image: url(background.jpg);}

今、私はそれを変更したいので、60秒後にbackground2.jpgに変更し、60秒後にbackground3.jpgなどに変更します。

私は体の中でそれを変更せずに多くのものを見つけましたが、ちょうどイメージとして...迅速な解決策はありますか？

ありがとうございました！

jquerycssbackground-image
15
Marc Ster

更新の再更新：

EVEN NEWER Fiddle（without arguments.callee）

変更：

大きな更新

この前の回答 からこのコードの内容を取得し、いくつかのキラキラを追加しました（私のサイトバックグラウンドstash lolを使用）

元のフィドル：）

新しいスーパーフィドル

Javascript：

$(document).ready(function () {
    var img_array = [1, 2, 3, 4, 5],
        newIndex = 0,
        index = 0,
        interval = 5000;
    (function changeBg() {

        //  --------------------------
        //  For random image rotation:
        //  --------------------------

            //  newIndex = Math.floor(Math.random() * 10) % img_array.length;
            //  index = (newIndex === index) ? newIndex -1 : newIndex;

        //  ------------------------------
        //  For sequential image rotation:
        //  ------------------------------

            index = (index + 1) % img_array.length;

        $('body').css('backgroundImage', function () {
            $('#fullPage').animate({
                backgroundColor: 'transparent'
            }, 1000, function () {
                setTimeout(function () {
                    $('#fullPage').animate({
                        backgroundColor: 'rgb(255,255,255)'
                    }, 1000);
                }, 3000);
            });
            return 'url(http://www.fleeceitout.com/images/field.' + img_array[index] + '.jpg)';
        });
        setTimeout(changeBg, interval);
    })();
});

CSS：

body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    background-image: url(http://www.fleeceitout.com/images/field.2.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-attachment: fixed;
}
#fullPage {
    position: absolute;
    min-width: 100%;
    min-height: 100%;
    top: 0;
    left: 0;
    background-color: rgb(255, 255, 255);
}
21
Deryck

setIntervalメソッドを使用して、CSSで定義されている異なる背景画像を持つクラスを切り替えることができます。

setInterval(function() {
    var $body = $('body');
    if($body.hasClass('background1'))
    {
        $body.removeClass('background1');
        $body.addClass('background2');
    }
    else {        
        $body.removeClass('background2');
        $body.addClass('background1');
    }
}, 1000);

フィドル

この例では、1000の間隔（1秒）を使用します。この値は、探している期間に応じて変更できます。

[〜＃〜] update [〜＃〜]

あなたの質問がフェードを要求していることに気づいたので、私はbodyにCSS3プロパティを追加しました：

body
{
    transition: background 0.5s linear;
}

フィドルが更新されました。

11
Dan-Nolan

Dan-Nolan（以前のuser506980）からの回答に基づいて、配列に背景を割り当ててから、配列から各背景をカウンターで呼び出すこともできます。

jsFiddle Demo

さらに、setInterval関数を変数に割り当て、その変数を後で使用して繰り返しを停止できます。

$(document).ready(function() {
    var cnt=0, bg;
    var $body = $('body');
    var arr = ['bg1.jpg','bg2.jpg','bg3.jpg','bg4.jpg','bg5.jpg','bg6.jpg'];

    var bgrotater = setInterval(function() {
        if (cnt==5) cnt=0;
        bg = 'url("' + arr[cnt] + '")';
        cnt++;
        $body.css('background-image', bg);
    }, 1000);

    //To stop the backgrounds from rotating. Note the critical step above
    //of assigning the setInterval function to a variable, in order to
    //use it again (below) to stop the repeating function
    $('#some_button_id').click(function() {
        clearInterval(bgrotater);
    });

}); //END document.ready

ダン・ノーランの答えに基づいて作成したので、これに賛成の場合は彼の答えに賛成してください。正しい。賛成票。

7
cssyphus

https://github.com/srobbin/jquery-backstretch Backstretchは、動的にサイズ変更されたスライドショー対応の背景画像を任意のページまたは要素に追加できるシンプルなjQueryプラグインです。画像はページ/要素に合わせて伸縮し、ウィンドウ/要素のサイズが変更されると自動的にサイズが変更されます。

2
Kenrick

Presentacionコンテナーでイメージが12秒ごとに変更されます。ボディタグにすることができます

[〜＃〜] html [〜＃〜]

<div class="presentacion">
  <div class="mask"></div>
</div>

[〜＃〜] js [〜＃〜]

delay（11000）+ setTimeout（1000）= 12秒の移行期間= 300 + 300 = 600ミリ秒

var imgArray = ['image-1', 'image-2', 'image-3'], index = 0;

(function changeBG(){
  // mask element only for transition
  $('.mask').delay(11000).animate({opacity:1}, 300, function(){
    index = (index + 1) % img_array.length;
    // in presentacion element change bg images
    $('.presentacion').css("background-image", "url('images/bg-"+imgArray[index]+".jpg')");
  }).animate({opacity: 0}, 300);
  setTimeout(changeBG, 1000);
})();

[〜＃〜] css [〜＃〜]

.presentacion {
  background-attachment: fixed;
  background-color: rgba(0, 0, 0, 0.5);
  background-image: url("images/image-1.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
  position: relative;
  width: 100%;
  z-index: 0;
  opacity: 1;
}
.mask {
  background-color: rgba(0,0,0,0);
  bottom: 0;
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  z-index: 10;
}
0
Juan Pablo Vaca Pliego
jQuery(document).ready(function() {
var cnt=0, bg;
var $body = jQuery('body');
var arr = ['secondbg.jpg','sartulebis-archeva2.png'];

animate = function(){

}
var bgrotater = setInterval(function() {
    if (cnt==2) cnt=0;
    bg = 'url("http://yalcingroup.ge/test/wp-content/uploads/2015/08/' + arr[cnt] + '")';
    cnt++;
    jQuery('#background_cycler').animate({opacity:1}, 2000, function(){
        $body.css('background-image', bg);
    });


    jQuery('#background_cycler').animate({opacity:0}, 2000);
},10000);

}）;

0
George

Deryckの答えに基づいて...

JQuery Colorが正しく機能しない場合（時々機能します）、代わりにfadeIn()とfadeOut()を使用できます。

 $(document).ready(function () {
    var img_array = [1, 2, 3, 4, 5],
        newIndex = 0,
        index = 0,
        interval = 5000;
    (function changeBg() {

        //  --------------------------
        //  For random image rotation:
        //  --------------------------

            //  newIndex = Math.floor(Math.random() * 10) % img_array.length;
            //  index = (newIndex === index) ? newIndex -1 : newIndex;

        //  ------------------------------
        //  For sequential image rotation:
        //  ------------------------------

            index = (index + 1) % img_array.length;

        $('body').css('backgroundImage', function () {
            $('#fullPage').fadeOut(1000, function () {
                setTimeout(function () {
                    $('#fullPage').fadeIn(1000);
                }, 3000);
            });
            return 'url(http://www.fleeceitout.com/images/field.' + img_array[index] + '.jpg)';
        });
        setTimeout(changeBg, interval);
    })();
});
0
Crimbo