jQuery body background-image rotator

Für eine Website, die ich gerade entwerfe, würde ich gerne den Body Background auf einer Rotation einer Reihe von Bildern haben. Ich habe mehrere Wege ausprobiert, d. H. Mit den Funktionen fadeIn() und fadeOut(), aber sie scheinen die Opazität der Unterteilungen innerhalb des Körpers zu beeinflussen. Ich habe auch versucht, bgStretcher zu verwenden, aber das verursachte Aussehensprobleme und machte die Website langsam und abgehackt.jQuery body background-image rotator

Ich möchte die Bilder vorzugsweise ein- und ausblenden. Hilfe würde geschätzt,

Here's a link to the website Die Skriptdatei ich gerade bearbeiten wurden background.js unter dem/js/Verzeichnis aufgerufen wird. Die Datei ist momentan auskommentiert, da sie nur experimentell ist. Die beiden aktuellen Hintergrundbilder sind "images/bg/bg1.jpg" und "images/bg/bg2.jpg"

Hier ist meine aktuellen Code, den ich zu bekommen versuche arbeiten:

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

Sobald ich herausfinden kann, wie ich zwischen Hintergrundbildern wechseln kann, kann ich einfach einige Bedingungen hinzufügen, um zwischen einem Array von Bildern zu wechseln.

Cheers, Dane Wilson

Quelle

2012-06-02 Dane Wilson

Bitte schreiben Sie den entsprechenden Code, mit dem Sie unsere Hilfe wünschen * hier in Ihrer Frage *. Und, im Idealfall, postet eine [Live-Demo] (http://jsfiddle.net/), ansonsten, wenn das Problem gelöst ist, wird diese Frage nicht weiter verwendet (da der Problemcode korrigiert/von der Seite entfernt wird, auf die Sie verlinken). –

Sehr einfach mit dieser jQuery Plugin: jQuery Backstretch In den Demos "Gegengerade Verwendung in einer Diashow" ist eine Code-Snippet für sie.

Quelle

2012-06-02 11:56:04

Dies funktionierte genauso wie bgStretcher, den ich oben erwähnt habe, aber der Code ist viel kleiner und schöner. Ich fand heraus, was es langsam und unruhig machte. Das war, weil ich versuchte, ein Overlay-PNG zu verwenden, das transparente Eigenschaften hat, die Rendering-Probleme verursachen. Ich habe das behoben, indem ich meine Bilder mit dem Muster-Overlay vor der Anwendung gespeichert habe –

Dies kann nur mit css3 erfolgen. Ich werde bald eine Geige schreiben.

EDIT: Ich habe versucht, eine Animation mit Keyframes und CSS3 Hintergrund-Größe, aber anscheinend wollten sie nicht zu gut zusammenarbeiten (Flickern). Wahrscheinlich besser, dann in jQuery zu schauen.

Quelle

2012-06-02 12:07:39

jQuery body background-image rotator

Antwort

Verwandte Themen