corps images d'arrière-plan de changement avec la décoloration à l'aide de jQuery?

Je suis en utilisant les images des bannières dans le fond du corps {background: url(banner1.jpg)}

J'ai plusieurs image comme banner1.jpg, banner2.jpg, banner3.jpg.

Je veux changer les images automatiquement après un intervalle de temps spécifique de 5 à 10 secondes.

Comment faire avec jQuery? Je ne veux pas utiliser d'images en ligne.

InformationsquelleAutor Jitendra Vyas | 2012-01-29
  1. 3
    var images = ['banner1.jpg', 'banner2.jpg', 'banner3.jpg'];
var i = 0;

setInterval(function(){
    $('body').css('background-image', function() {
        if (i >= images.length) {
            i=0;
        }
        return 'url(' + images[i++] + ')'; 
    });
}, 5000);

    Mise à JOUR:
    Si vous voulez changer l'image en douceur, je vous suggère de mettre toutes les images des bannières dans une image et la définir comme le corps de l'image d'arrière-plan, puis utilisez .animer méthode avec background-position pour changer l'image de la bannière.

    • Ce que je vais devoir garder dans css body { background-image: url(../images/banner1.jpg)?
    • J'ai essayé ton code et il fonctionne, mais je veux changer les images en douceur.
    • Vous pouvez le garder, ou de définir le css une fois l'utilisation de jquery au premier abord.
    • Voir ma mise à jour.
    InformationsquelleAutor xdazz
  2. 3

    Il suffit de régler le background-image de l'élément:

    $(elem).css('background-image', 'url(banner2.jpg)');

    MODIFIER de fade in et fade out, vous aurez besoin de fondu de l'élément conteneur:

    $(elem).fadeOut('fast', function() {
     $(elem).css('background-image', 'url(banner2.jpg)')
         .fadeIn('fast');
});
    • comment les images changent avec le fadein et hors
    • voir la réponse révisée
    • Notez également que vous avez à précharger les images pour que cela fonctionne dans les premiers temps pleople visite de la page.
    InformationsquelleAutor ori
  3. 0

    Je tiens à dire que cette information est très utile et ça fonctionne. J'ai essayé quelque chose de différent à l'aide de JQuery:

    HTML:

    <div id="pic"></div>
<div id="bat"></div>

    CSS:

    #pic {
    position: absolute;
    z-index: -98;
    top: 0;
    left: 0;
    background-image: url ('http://wallpaperfast.com/wp-content/uploads/2013/05/Calm-sea-breeze-notebook-background-images-Desktop-Wallpaper.jpg');
    display: none;
}
#bat {
    position: absolute;
    z-index: -98;
    top: 0;
    left: 0;
    background-image: url('http://www.designmyprofile.com/images/graphics/backgrounds/background0172.jpg');
    display: none;
}

    JS:

     $('#pic').css({
     height: $(window).height(),
     width: $(window).width()
 }).fadeIn('slow', function () {
     $('#pic').css('background-image', 'url(http://wallpaperfast.com/wp-content/uploads/2013/05/Calm-sea-breeze-notebook-background-images-Desktop-Wallpaper.jpg)');
     $('#pic').fadeOut('slow');
     $('#pic').fadeIn('slow');
 });

    jsfiddle

    InformationsquelleAutor jquery