Cómo hacer un bucle de una imagen de fondo CSS con Jquery cada pocos segundos?

Me gustaría cambiar una imagen de fondo de css de encabezado cada pocos segundos, por lo que parece una presentación de diapositivas.Cómo hacer un bucle de una imagen de fondo CSS con Jquery cada pocos segundos?

Por ejemplo primeros 2 segundos ser:

body#home h1#siteH1 { background:url(../images/header1.jpg) no-repeat;}

Siguiente 2 segundos ser:

body#home h1#siteH1 { background:url(../images/header2.jpg) no-repeat;}

Siguiente 2 segundos ser:

body#home h1#siteH1 { background:url(../images/header3.jpg) no-repeat;}

Y entonces bucle de nuevo para header1.

Si alguien sabe cómo hacer la transición con un efecto de desvanecimiento, entonces sería simplemente perfecto.

Fuente

2009-09-03 Sergio del Amo

'body # home h1 # siteH1' es un selector altamente ineficiente. ¿Por qué no usar '' siteH1'? –

Para mi información, ¿este también es el caso con los selectores jQuery? – Ropstah

la caja de la funcionalidad de cola:

jQuery Queue

Fuente

2009-09-03 17:41:25 Slee

Ahora con la aparición gradual

Prueba esto:

var currentBackground = 0; 
var backgrounds = []; 
backgrounds[0] = '../images/header1.jpg'; 
backgrounds[1] = '../images/header2.jpg'; 
backgrounds[2] = '../images/header3.jpg'; 

function changeBackground() { 
    currentBackground++; 
    if(currentBackground > 2) currentBackground = 0; 

    $('body#home h1#siteH1').fadeOut(100,function() { 
     $('body#home h1#siteH1').css({ 
      'background-image' : "url('" + backgrounds[currentBackground] + "')" 
     }); 
     $('body#home h1#siteH1').fadeIn(100); 
    }); 


    setTimeout(changeBackground, 2000); 
} 

$(document).ready(function() { 
    setTimeout(changeBackground, 2000);   
});

Fuente

2009-09-03 17:45:26 Ropstah

su código se ejecuta inmediatamente. No espera en cualquier momento antes de cambiar el fondo y no vuelve al fondo inicial nuevamente. –

Básicamente, me gustaría hacer un loop entre las imágenes de fondo –

Ver la respuesta actualizada ... – Ropstah

tarde a la fiesta, pero esto es lo que acaba de llegar con un requisito similar.

<script type="text/javascript"> 
//populate image set 
var imageAry = ["1.jpg","2.jpg","3.jpg","4.jpg"]; 
//in milliseconds 
var fadeSpeed = "1000"; 
var timeout = 3000; 


function fadeInFront (i){ 
    $('#faderFront').css({ 
     "background-image" : "url("+imageAry[i]+")" 
    }); 
    $('#faderFront').fadeIn(fadeSpeed); 
    i++; 
    if (i==imageAry.length){i=0;} 
    setTimeout(function(){ 
     fadeOutFront(i); 
    },timeout); 
} 
function fadeOutFront (i){ 
    $('#faderBack').css({ 
     "background-image" : "url("+imageAry[i]+")" 
    }); 
    $('#faderFront').fadeOut(fadeSpeed); 
    i++; 
    if (i==imageAry.length){i=0;} 
    setTimeout(function(){ 
     fadeInFront(i); 
    },timeout); 
} 
function preload(arrayOfImages) { 
    $(arrayOfImages).each(function(){ 
     $('<img/>')[0].src = this; 
    }); 
} 

$(document).ready(function(){ 
    preload(imageAry); 
    setTimeout(function(){ 
     fadeOutFront(3); 
    },timeout); 
}); 
</script> 

<style type="text/css"> 

      #faderBack, 
      #faderFront, 
      #inFrontOfBoth 
      { 
       position: absolute; 
       top: 0; 
       left: 0; 
      } 
      #faderFront 
      { 
       background: url("4.jpg") no-repeat center top; 
      } 
</style> 

<body> 

<div id="container"> 

    <div id="faderBack"></div> 
    <div id="faderFront"></div> 
    <div id="inFrontOfBoth">Hello World</div> 
</div>

Fuente

2013-12-01 22:41:15 Yevgeniy

Cómo hacer un bucle de una imagen de fondo CSS con Jquery cada pocos segundos?

Respuesta

Cuestiones relacionadas