2012-06-02 14 views
5

Per un sito Web che sto progettando attualmente mi piacerebbe avere lo sfondo del corpo su una rotazione di una serie di immagini. Ho provato diversi modi, ad esempio usando le funzioni fadeIn() e fadeOut() ma sembrano influenzare l'opacità delle divisioni all'interno del corpo. Ho anche provato a utilizzare bgStretcher ma questo ha causato problemi di aspetto e ha reso il sito lento e instabile.jQuery body background-image rotator

Preferirei che le immagini si dissolvino in entrata e in uscita. aiuto sarebbe apprezzato,

Here's a link to the website Il file di script Io attualmente sono stato modifica è chiamato background.js sotto la/directory/js. Il file è attualmente commentato come È solo sperimentale. Le due immagini di sfondo attuali sono "immagini/bg/bg1.jpg" e "images/bg/bg2.jpg"

Ecco il mio codice attuale, che sto cercando di far funzionare:

$(document).ready(function() { 
    setInterval(switchImage, 5000); 
    switchImage(); 

}); 

function switchImage() 
{ 
$('body').css("background-image", "url(../images/bg/bg2.jpg)").fadeIn(1000); 
$('body').css("background-image", "url(../images/bg/bg1.jpg)").fadeOut(1000); 
} 

Una volta che posso capire come passare tra le immagini di sfondo, posso aggiungere alcune condizioni per cambiare tra una serie di immagini.

Cheers, Dane Wilson

+0

Si prega di inviare il codice pertinente, con il quale ti piacerebbe il nostro aiuto, * qui nella tua domanda *. E, idealmente, pubblica una [live demo] (http://jsfiddle.net/), altrimenti, una volta risolto il problema, questa domanda non ha più alcun senso (dal momento che il codice del problema verrà corretto/rimosso dalla pagina che colleghi a). –

risposta

7

molto semplice con questo plugin jQuery: jQuery Backstretch Nella demo "Utilizzo Backstretch in una presentazione" è un codice-frammento di per esso.

+0

Funzionava allo stesso modo di bgStretcher che ho menzionato sopra, ma il codice è molto più piccolo e bello. Ho capito cosa stava causando che fosse lento e mosso. Era perché stavo cercando di usare un PNG overlay che ha proprietà trasparenti che causano problemi di rendering. Ho risolto questo problema salvando le mie immagini con l'overlay del pattern pre-applicato –

0

Questo può essere fatto solo con css3. Pubblicherò un violino presto.

EDIT: Ho provato a creare un'animazione con i fotogrammi chiave e le dimensioni di sfondo di CSS3, ma apparentemente non volevano lavorare insieme troppo bene (sfarfallio). Probabilmente è meglio guardare in jQuery allora.

Problemi correlati