Jak zapętlić obraz tła css z Jquery co kilka sekund?

Chciałbym zmienić obraz tła nagłówka CSS co kilka sekund, aby wyglądał jak pokaz slajdów.Jak zapętlić obraz tła css z Jquery co kilka sekund?

Na przykład pierwsze 2 sekund;:

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

kolejne 2 sekund;:

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

kolejne 2 sekund;:

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

Następnie pętla ponownie header1.

Jeśli ktokolwiek wie, jak przeprowadzić przejście z efektem zanikającym, byłby po prostu doskonały.

Źródło

2009-09-03 Sergio del Amo

'body # home h1 # siteH1' jest wysoce nieefektywnym selektorem. Dlaczego po prostu nie użyć '# siteH1'? –

Dla mojej informacji, czy tak jest również w przypadku selektorów jQuery? – Ropstah

Zamówienie funkcjonalność kolejka:

jQuery Queue

Źródło

2009-09-03 17:41:25 Slee

Teraz z wyciszeniem

Spróbuj tego:

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

Źródło

2009-09-03 17:45:26 Ropstah

Twój kod wykonuje się natychmiast. Nie czeka w dowolnym momencie przed zmianą tła i nie przechodzi ponownie do początkowego tła. –

Zasadniczo chciałbym pętli między obrazkami tła –

Zobacz zaktualizowaną odpowiedź ... – Ropstah

późno do partii, ale tutaj jest to, co właśnie przyszedł z podobnym wymaganiem.

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

Źródło

2013-12-01 22:41:15 Yevgeniy

Jak zapętlić obraz tła css z Jquery co kilka sekund?

Odpowiedz

Powiązane problemy