Bilder automatisch wechseln
Hallo, bin neu hier und hab eine Frage:
Wie kann ich mit CSS Bilder auf einer Seite wechseln lassen? Das erste Bild ist als Hintergrund in einem div-Container. Dieses soll alle 5 Sek. durch ein anderes ersetzt werden. Muss ich dafür Javascript o. ä. verwenden? Gruß Heinz |
Was du suchst, nennt sich Slider.
Da gibt es dutzende, wenn nicht sogar hunderte, in verschiedenen Varianten. Mit <img>-Tags, als background-images, usw. und es gibt auch reine CSS-Lösungen. Die Javascript-Slider sind aber oftmals die schöneren, funktionieren in mehr Browsern und bieten mehr Möglichkeiten. Einfach mal nach Slider googlen und gucken, welcher dir am meisten zusagt. |
Es muss nicht sein, dass er einen Slider sucht. Wenn er das Hintergrundbild wechseln lassen will, dann ist das nicht wirklich ein slider sondern mit einfachem Javascript getan.
|
Ja, es sollen einfach alle paar Sek. Hintergrundbilder getauscht werden.
Einen üblichen Slider auf Skriptbasis wollte ich eigentlich vermeiden. Eine CSS Lösung, die ich evt. nachvollziehen kann, wäre das Ziel. Gruß Heinz |
Hallo
Solche animierten Bilderwechsel können mit CSS mittels @keyframes erzeugt werden. Die Animationen können endlos laufen. Wenn fünf Hinergrundbilder vorhanden sind, die alle 8 Sekunden wechseln sollen wird das erste sofort eingeblendet, nach 8 Sekunden ausgeblendet und bleibt 32 Sekunden ausgeblendet. Danach beginnt der Vorgang von vorne. Das zweite Bild wird nach 8 Sekunden eingeblendet, bleibt 8 Sekunden sichtbar und bleibt 24 Sekunden ausgeblendet. Danach beginnt der Vorgang von vorne. Das dritte Bild wird nach 16 Sekunden eingeblendet, bleibt 8 Sekunden sichtbar und bleibt 16 Sekunden ausgeblendet. Danach beginnt der Vorgang von vorne. Und so weiter. Damit sind aber auch andere Lösungen denkbar. So können alle Bilder zu einem einzigen großen Bild zusammengesetzt werden und das große Bild wird so verschoben, dass zeitgesteuert immer nur eins sichtbar ist. Siehe https://www.mediaevent.de/tutorial/c...keyframes.html und https://www.mediaevent.de/css/backgr...e-mehrere.html Für eine andere Anfrage habe ich vor einiger Zeit einmal eine zeitgesteuere Animation mit Vordergrundbildern erstellt. Das Prinzip ist aber das gleiche. Nachfolgend der zugehörige Quelltext: Code:
<!DOCTYPE html> Gruss MrMurphy |
Zitat:
Danke, schau mal ob ich das verarbeitet bekomme. Gruß Heinz |
Slider
Setze jetzt diesen Code ein:
Zitat:
Zitat:
Zitat:
setzte ich in den Ordner root - scrips ... Nach dieser Anleitung: http://michaelsoriano.com/create-rot...ss-and-jquery/ Funktioniert nicht?! Es wird einfach nur das letzte Bild angezeigt. Wie kann ich den body image Hintergrund alles paar Sekunden wechseln? Kann nur Html und CSS. Hilfe wäre gut und nachvollziehen kann ich es eh nicht mehr! Danke. Gruß Heinz |
Das wäre auch in Ordnung.
Die Hintergrundbilder wechseln automatisch alle 5 Sekunden. Bekomms aber auch nicht hin ... Gruß Heinz |
Zitat:
Ansonsten: Schau auch mal in die Fehlerkonsole, dort sollten dir solche Dinge sofort auffallen. |
Danke. Habs umbenannt und der Ordner scripts hieß auch scrips ...
Läuft abr immer noch nicht. Es wird nur das letzte Bild angezeigt. |
Alle Zeitangaben in WEZ +2. Es ist jetzt 17:18 Uhr. |
Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.
© Dirk H. 2003 - 2023