Ändern Sie den hintergrund Bild mit fade-Effekt in jquery

Hey ich will zu verblassen in ein neues hintergrund-Bild können sagen, dass alle 60 Sekunden. Ich habe den hintergrund Bild wie dieses:

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

Nun will ich es ändern, so dass nach 60 Sekunden wechselt es in background2.jpg dann nach 60 Sekunden background3.jpg und so weiter..

Ich fand eine Menge Sachen, die, ohne es zu ändern in den Körper, sondern nur als ein Bild...
schnelle Lösungen?

Danke!

InformationsquelleAutor der Frage Marc Ster | 2013-11-28

Re-UPDATE des UPDATE:

Auch NEUERE Geige (ohne Argumente.aufgerufene)

Changes:

Javascript-Verbesserungen
CSS-Korrekturen (passt voll Seite jetzt)
Hinzugefügt option für zufällige Reihenfolge der Bilder anstelle der sequentiellen
=> Alternative version der NEUEREN Fiddle <= (wenn OP ' s img-server down ist)

GROßES UPDATE

Nahm das Fleisch von diesem code aus diese Vorherige Antwort und Hinzugefügt einige bling (mit Hilfe meiner Website hintergrund stash lol)

original fiddle 🙂

NEUE Super-Fiddle

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);
}

InformationsquelleAutor der Antwort Deryck

11

Können Sie die setInterval Methode und wechseln zwischen den definierten Klassen in der CSS, die verschiedene hintergrund-Bilder:
```
setInterval(function() {
    var $body = $('body');
    if($body.hasClass('background1'))
    {
        $body.removeClass('background1');
        $body.addClass('background2');
    }
    else {        
        $body.removeClass('background2');
        $body.addClass('background1');
    }
}, 1000);
```
Fiddle

In diesem Beispiel wird ein Intervall von 1000 was ist eine Sekunde. Sie können diesen Wert ändern, für einen beliebigen Zeitraum von Zeit, die Sie suchen.

UPDATE

Bemerkt Ihre Frage für eine fade, so dass ich Hinzugefügt eine CSS3-Eigenschaft auf den Körper:
```
body
{
    transition: background 0.5s linear;
}
```
Fiedel wurde aktualisiert.

InformationsquelleAutor der Antwort Dan-Nolan

Aufbauend auf die Antwort von Dan Nolan (ehemals user506980), Sie können auch ordnen Sie die Hintergründe zu einem array und dann rufen jedes Hintergrundfarbe aus dem array mit einem Zähler

jsFiddle Demo

Weiter, die Sie zuweisen können, die setInterval-Funktion einer Variablen zu, und verwenden Sie dann die variable später zu stoppen, die sich wiederholt.

$(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

Gebaut, seit ich auf Dan-Nolans Antwort, bitte upvote seine Antwort, wenn Sie upvote diese. Und ich sehe, dass Deryck Hinzugefügt hat sein, und ist es auch richtig. Upvote.

InformationsquelleAutor der Antwort gibberish

2

https://github.com/srobbin/jquery-backstretch
Backstretch ist ein einfaches jQuery-plugin, das Sie hinzufügen, die dynamisch in der Größe verändert, Diashow-fähig Hintergrundbild für jede Seite oder jedes element. Das Bild wird gestreckt, um fit Seite/element, und wird automatisch die Größe wie das Fenster/- element-Größe ändert.

InformationsquelleAutor der Antwort Kenrick

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);

});

InformationsquelleAutor der Antwort George

Jede 12 Sekunden ein Bild geändert wird, presentacion container; es kann body-tag

HTML

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

Verzögerung(11000) + setTimeout(1000) = 12 sec
übergangs-Dauer = 300 + 300 = 600 msec

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;
}

InformationsquelleAutor der Antwort Juan Pablo Vaca Pliego

Gebäude auf Deryck Antwort...

Wenn jQuery Farbe nicht richtig funktionieren (was er manchmal tut), kann man fadeIn() und fadeOut() statt:

 $(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);
    })();
});

InformationsquelleAutor der Antwort Crimbo

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.