Ich habe schon ein paar Sachen ausprobiert, aber bis jetzt kein Glück.
Was ich suche, ist eine Möglichkeit, mit meinem HTML-Header-Tag alle paar Sekunden Hintergrundbilder zu ändern. Jede Lösung ist willkommen, solange sie nicht zu komplex ist.
Ich habe jetzt diesen Code sowie eine Verknüpfung zu JQuery:
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
Mein HTML-Header:
<header class="mainHeader"></header>
Und CSS:
%Vor%Im Moment habe ich jetzt ein Hintergrundbild.
Ich freue mich auf Vorschläge.
Einige Änderungen an Ihrem Code vorgenommen
DEMO: Ссылка
%Vor%Größte Änderungen (wie in anderen Kommentaren erwähnt) ist, dass Sie Apostrophe ** '** s verwenden müssen, nicht diese funky offenen und schließen einfachen Anführungszeichen und dass Ihr Array nicht korrekt war.
Mit diesen Korrekturen habe ich einige Dinge vereinfacht:
current dann nehmen Modulus (ich weiß, das ist im Grunde, was Sie getan haben, aber wie viel einfacher ist das Debug ;) ) background-image direkt setInterval() anstelle eines doppelten Aufrufs an setTimeout Sie könnten dieselbe Technik mit HTML / CSS erreichen. Nur indem Sie Bilder in ein "img" -Tag in Ihrem HTML-Code einfügen, das von einem "div wrapper" umgeben ist: relative und div wrapper img an position: absolute . Für volle Breite / volle Höhe können Sie Prozentsätze oder möglicherweise "background-size: cover" verwenden (nicht aktiviert) und dann eine CSS-Animation aufrufen, um die Bilder dynamisch zu ändern.
Oder 2. Sie können mehrere Bilder zu einem Hintergrund in Ihrem CSS hinzufügen, die durch Kommas getrennt sind. Wenden Sie background-size: cover an und verwenden Sie wieder CSS-Animationen, um den Hintergrund zu ändern.
Hier ist ein Beispiel und auch Mozilla CSS3 Animation Dokumentation
Es muss spät sein, kann aber einem anderen helfen. Für dieses Ziel bevorzuge ich in einigen Situationen ein jquery-Plugin mit dem Namen tcycle, das nur ein paar Zeilen Code hat und nur den Fade-Übergang unterstützt, aber es funktioniert auch bei großen Bildern reibungslos.
Das Einrichten einer Diashow mit tcycle ist einfach und könnte sogar mit deklarativem Markup wie
durchgeführt werden %Vor%Der Trick könnte mit css z-index gemacht werden: -1 für Container div und Einstellung von width und height auf 100%
Homepage zum Herunterladen und Überprüfen auf andere Beispiele ist Malsup jQuery-Plugins
Tags und Links javascript html jquery css