pimbolie1979
Mitglied
Hallo Leute
ich habe mich mal an einer eigenen Slideshow versucht (ich weiß das es schon fertige Versionen gibt jedoch wollte ich dies auch mal selber machen). Meine Slideshow funktioniert jedoch noch nicht ganz optimal. Deshalb habe ich noch einige Fragen zum CSS. Die Slideshow habe ich wie folgt realisiert. Ich habe eine Div Container mit dem Namen "content". In dem Div Container befindet sich ein weiterer Div Container mit dem Namen "slider", mit dem ich die Bezugsposition zurücksetze (position: relative;).
Im Div Container "slider" habe ich dann 4 Bilder hinzugefügt und die Position mit CSS formatiert. Die 4 Bilder müssen je genau übereinander liegen, damit ich einen Überblendeffekt erzeugen kann. Daher habe ich jedes Bild mit ""position: absolute; top: 0px; left: 0px;" versehen. Jedoch muste ich festellen das die Angabe der absoluten Position nicht ausreicht. Die Bilder liegen dann leider immer noch untereinandern. Das finde ich schon mal sehr komisch. Ich dachte mit der Angabe der absoluten Position müssen alle 4 Bilder übereinander liegen.
Anschließend habe ich noch die CSS Formatierung "z-index: 1, z-index: 2, z-index: 3, z-index: 4" hinzugefügt. Auch das hat leider nichts gebracht. Die Bilder lagen immer noch nicht übereinander. Was mache ich denn falsch?
Damach habe ich noch die CSS Formatierung overflow: hidden; hinzugefügt. Dann lagen endlich alle Bilder übereinander.
Danach habe ich ein Javascript geschrieben, das den Wert der Transparenz von 2 Bildern ändert. Somit erzeuge ich den Überblendeffekt.
Jedoch habe ich folgendes Problem bei meiner Slideshow:
Wenn die Seite geladen wird, dann wir für ein kurzen Augenblick alle 4 Bilder dargestellt. Dies liegt daran das die Bilder nicht erst dargestellt werden wenn diese fertig geladen sind, sondern es wird schon eine Vorschau erzeugt. Dabei wird dann das 3. Bild z.B. schneller geladen als das 1. Bild und dann kommt diese zum Vorschein, obwohl die Transparenz auf 0 eingestellt ist. Die Bilder sind von der Dateigröße momentan noch recht groß. Dies werde ich aber noch ändern. Wie kann man das denn besser gestallten? Muss ich die Bilder 2,3 und 4 zuerst auf hidden stellen und dann per Javascript wieder auf sichtbar stellen? Oder gibt es eine bessere CSS Lösung?
Bis jetzt habe ich die CSS Formatierung nicht in einem seperaten File erzeugt sonden direkt in meine Startseite implementiert. Dies werde ich bald ändern.
Hier meine Webseite man muss schon 30Sekunden warten bis die Slideshow startet
Gastgeber-Deutschland
ich habe mich mal an einer eigenen Slideshow versucht (ich weiß das es schon fertige Versionen gibt jedoch wollte ich dies auch mal selber machen). Meine Slideshow funktioniert jedoch noch nicht ganz optimal. Deshalb habe ich noch einige Fragen zum CSS. Die Slideshow habe ich wie folgt realisiert. Ich habe eine Div Container mit dem Namen "content". In dem Div Container befindet sich ein weiterer Div Container mit dem Namen "slider", mit dem ich die Bezugsposition zurücksetze (position: relative;).
Im Div Container "slider" habe ich dann 4 Bilder hinzugefügt und die Position mit CSS formatiert. Die 4 Bilder müssen je genau übereinander liegen, damit ich einen Überblendeffekt erzeugen kann. Daher habe ich jedes Bild mit ""position: absolute; top: 0px; left: 0px;" versehen. Jedoch muste ich festellen das die Angabe der absoluten Position nicht ausreicht. Die Bilder liegen dann leider immer noch untereinandern. Das finde ich schon mal sehr komisch. Ich dachte mit der Angabe der absoluten Position müssen alle 4 Bilder übereinander liegen.
Anschließend habe ich noch die CSS Formatierung "z-index: 1, z-index: 2, z-index: 3, z-index: 4" hinzugefügt. Auch das hat leider nichts gebracht. Die Bilder lagen immer noch nicht übereinander. Was mache ich denn falsch?
Damach habe ich noch die CSS Formatierung overflow: hidden; hinzugefügt. Dann lagen endlich alle Bilder übereinander.
Danach habe ich ein Javascript geschrieben, das den Wert der Transparenz von 2 Bildern ändert. Somit erzeuge ich den Überblendeffekt.
HTML:
<img style="position: absolute; top: 0px; left: 0px; overflow: hidden; z-index: 1; opacity: 1;" src="bilder/content_2.jpg"></img><img style="position: absolute; top: 0px; left: 0px; overflow: hidden; z-index: 2; opacity: 0;" src="bilder/content_3.jpg"></img><img style="position: absolute; top: 0px; left: 0px; overflow: hidden; z-index: 3; opacity: 0;" src="bilder/content_4.jpg"></img><img style="position: absolute; top: 0px; left: 0px; overflow: hidden; z-index: 4; opacity: 0;" src="bilder/content_5.jpg"></img>Jedoch habe ich folgendes Problem bei meiner Slideshow:
Wenn die Seite geladen wird, dann wir für ein kurzen Augenblick alle 4 Bilder dargestellt. Dies liegt daran das die Bilder nicht erst dargestellt werden wenn diese fertig geladen sind, sondern es wird schon eine Vorschau erzeugt. Dabei wird dann das 3. Bild z.B. schneller geladen als das 1. Bild und dann kommt diese zum Vorschein, obwohl die Transparenz auf 0 eingestellt ist. Die Bilder sind von der Dateigröße momentan noch recht groß. Dies werde ich aber noch ändern. Wie kann man das denn besser gestallten? Muss ich die Bilder 2,3 und 4 zuerst auf hidden stellen und dann per Javascript wieder auf sichtbar stellen? Oder gibt es eine bessere CSS Lösung?
Bis jetzt habe ich die CSS Formatierung nicht in einem seperaten File erzeugt sonden direkt in meine Startseite implementiert. Dies werde ich bald ändern.
Hier meine Webseite man muss schon 30Sekunden warten bis die Slideshow startet
Gastgeber-Deutschland
