diaporama pour les div à l'image de fond + jquery

J'ai un gros div élément de l'en-tête et il y a beaucoup de contenu de texte et quelques boîtes dans le div. et j'ai un gros img bg pour cette div, maintenant j'ai besoin de faire un diaporama pour cette div à l'arrière-plan :/

Comment puis-je faire un diaporama pour un div de l'image d'arrière-plan?

J'ai fait des recherches beaucoup, mais ne pouvait pas trouver quoi que ce soit :/

Merci beaucoup! apprécier!

OriginalL'auteur designer-trying-coding | 2009-09-22

  1. 2

    Une façon de le faire est de faire un tableau d'arrière-plan-images:

    var bgArr = ["img/bg1.jpg", "img/bg2.jpg"]; //and so on...
function backgroundSlide(i) {
    $("#header").css("background-image", "url("+bgArr[i++]+")");
    if (i == bgArr.length) i = 0;
    var st = setTimeout(arguments.callee(i), 1000);
}
backgroundSlide(0)

    Ce sera juste de la boucle et en boucle...

    OriginalL'auteur peirix

  2. 2

    Je recherchais un élément d'arrière-plan css diaporama, Merci pour vos commentaires. J'ai exploré votre solution avec la méthode setTimeout, toutefois eu des énormes problèmes avec elle (je suis un noob).

    J'ai adapté peirix de la solution avec un setInterval alternative et est venu avec cette;

    var bgArr = ["images/TopImage-01.jpg", "images/TopImage-02.jpg", "images/TopImage-03.jpg" ]; 
var i=0;

//Start the slide show
var interval = self.setInterval("swapBkgnd()", 5000)  

function swapBkgnd() {
 if (i>(bgArr.length-1) ) {
  i=0
  $("#header").css("background-image", "url("+bgArr[i]+")");
 }
 else {
  $("#header").css("background-image", "url("+bgArr[i]+")"); 
 } 
 i++;
};

    Maintenant, j'ai besoin d'ajouter un effet de fondu et de l'image de préchargement et je vais être loin. Serais intéressé de savoir si il y a de plus propre façon d'atteindre cet objectif.

    OriginalL'auteur

  3. 0

    Vous pouvez utiliser les méthodes suivantes pour modifier l'image d'arrière-plan:

    $("#mydiv").css("background-image", "url(1.jpg)");

    Afin de créer un diaporama, un appel à intervalles réguliers, en utilisant settimeout.

    OriginalL'auteur kgiannakakis

  4. 0

    Quelques jours avant, j'ai été à la recherche d'explication similaire. Réponse numéro deux était assez bon, mais comme je peux voir, il a besoin d'effet de fondu. J'ai réalisé que (et plus). Voici le code:

    var bgArr = ['img1.png', 'img2.png', 'img3.png', 'img4.png']; 
var bgText = ['text1', 'text2', 'text3', 'text4']; 
var i=0;
var left = 0;
$(document).ready(function() {
timer = setTimeout("changeBG()", 7000);
$("#slider_left").on("click", function(){
i = i-2;
if(i<-1) i = bgArr.length-2;         
left = 1;       
clearTimeout(timer);        
changeBG();     
});     
$("#slider_right").on("click", function(){      
if(i>(bgArr.length-1)) i = 0;
clearTimeout(timer);
changeBG();
});
});
function changeBG() {
i++;
if(i>(bgArr.length-1)) i = 0;
$('#slider_up').stop().fadeIn(1000, function(){
if(left == 1){
var a = i+1;
if(i == bgArr.length-1)
a = 0;
}else{
var a = i-1;
if(i == 0)
a = bgArr.length-1;
}
left = 0;
$("#slider_up").css("background", "url("+bgArr[a]+") no-repeat center center white");
$("#slider_up").css('opacity',0).show().animate({opacity:1});
$("#slider_down").css("background", "url("+bgArr[i]+") no-repeat center center white");
$("#slider_up").css('opacity',1).show().animate({opacity:0});
$(".text_holder").fadeOut(1000, function() {
$(this).html(bgText[i]);
$(this).fadeIn(500);
});
});
timer = setTimeout("changeBG()", 7000);
};

    Je l'ai expliqué sur mon blog: http://blog.braovic.com/css-background-slider-and-slideshow/

    Espère que cela vous aide à vous tous.
    Mieux,
    Ante.

    OriginalL'auteur Ante Braovic

  5. 0

    Ce qui peut vous aider - https://github.com/im4aLL/bose

    $("#header").bose({
images : [ "imagePath_1", "imagePath_2", "imagePath_3"]
});

    Mais seulement de fondu de transition. Bonne chance!

    OriginalL'auteur HADI