it-swarm.com.de

Ändern Sie das Körperhintergrundbild mit Überblendeffekt in Jquery

Hey, ich möchte ein neues Hintergrundbild einblenden, sagen wir alle 60 Sekunden. Ich habe das Hintergrundbild so eingestellt:

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

Jetzt möchte ich es ändern, also wechselt es nach 60 Sekunden zu background2.jpg, dann nach 60 Sekunden zu background3.jpg usw.

Ich habe viel Material gefunden, ohne es im Körper zu ändern, sondern nur als Bild ........ Schnelle Lösungen?

Vielen Dank!

15
Marc Ster

Aktualisieren Sie die Aktualisierung:

Even NEWER Fiddle (ohne argumente.callee)

Änderungen:


GROSSES UPDATE


Nehme das Fleisch dieses Codes aus dieser vorherigen Antwort und fügte etwas Bling hinzu (unter Verwendung meines Stash-Hintergrunds für meine Site).

ursprüngliche Geige :)

NEU 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);
}
21
Deryck

Sie können die Methode setInterval verwenden und zwischen in Ihrem CSS definierten Klassen mit unterschiedlichen Hintergrundbildern wechseln:

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 verwendet, das eine Sekunde ist. Sie können diesen Wert für jeden gewünschten Zeitraum ändern. 

UPDATE

Da Ihre Frage nach einer Überblendung gefragt wurde, habe ich eine CSS3-Eigenschaft für body hinzugefügt:

body
{
    transition: background 0.5s linear;
}

Die Geige wurde aktualisiert.

11
Dan-Nolan

Aufbauend auf der Antwort von Dan-Nolan (ehemals 506980) können Sie die Hintergründe auch einem Array zuweisen und anschließend jeden Hintergrund des Arrays mit einem Zähler aufrufen

jsFiddle Demo

Außerdem können Sie einer Variablen die Funktion setInterval zuweisen und diese Variable später verwenden, um die Wiederholungen zu stoppen.

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

Da ich auf Dan-Nolans Antwort aufgebaut habe, stimmen Sie bitte seiner Antwort zu, wenn Sie dieser zustimmen. Und ich sehe, dass Deryck seine hinzugefügt hat, und das ist es auch richtig. Upvote.

7
gibberish

https://github.com/srobbin/jquery-backstretch Backstretch ist ein einfaches jQuery-Plugin, mit dem Sie einer Seite oder einem Element ein dynamisch skaliertes, Diashow-fähiges Hintergrundbild hinzufügen können. Das Bild wird an die Seite/das Element angepasst und die Größe wird automatisch angepasst, wenn sich die Fenster-/Elementgröße ändert. 

2
Kenrick

Alle 12 Sekunden wird ein Bild im Presentacion-Container geändert. Es kann sich um eine Körpermarke handeln

HTML

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

JS

delay (11000) + setTimeout (1000) = 12 sec. __ Übergangszeit = 300 + 300 = 600 ms

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

Auf Derycks Antwort bauen ...

Wenn jQuery Color nicht ordnungsgemäß funktioniert (was manchmal auch der Fall ist), können Sie stattdessen fadeIn() und fadeOut() verwenden:

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