SUPER, danke vielmals - nun funktioniert es genau so wie ich es mich vorgestellt habe.
Viele Grüsse an die Nordseeküste aus "Bella Italia", Nebbiolo
Beiträge von nebbiolo
-
-
Vielen Dank, so funktioniert es fast
Nur bleibt das letzte Bild stehen und die Übergänge sind abrupt.Hier habe ich die Beschreibung gefunden: https://wiki.selfhtml.org/wiki/CSS/Anwen…is/Bildwechsler
Ich habe alles ein bisschen abgeändert, aber komme einfach zu keinem brauchbaren Resultat.
Was mir nicht klar ist: @keyframe wechseln gilt das für jedes einzelne Bild?
-
Danke Sailor für Deine Ausführungen!
Mit drei Bilder, wie "Code" oben funktioniert es genau nach meinen Vorstellungen. Ich möchte auf eine Webseite einfach 8 Fotos abwechseln anzeigen, dann immer wiederholen - auch keinen Button betätigen wie beim angegeben Link. Die Bilder sind alle genau gleich gross.
Ich habe zusätzlich noch 5 (3-7) #gallery figure:nth-of-type(3-7) eingefügt und auch dem delay geändert ... es hat mir aber einfach drei andere Bilder angezeigt.Code#gallery figure:nth-of-type(3) { animation-delay: 5s; #gallery figure:nth-of-type(4) { animation-delay: 5s; etc. [COLOR=#333333]} etc. [/COLOR] -
Hallo
Ich habe im Netz eine schöne Variante für einen Bildwechsel ohne Java gefunden. Nur habe ich das Problem. dass es nur mit 3 Bilder funktioniert - ich möchte aber deren 8. Ich habe #gallery figure:nth-of-type werweitert - ohne gewünschtes Resultat. Kann mir jemand sagen was ich ändern muss?Vielen Dank und sonnige Grüsse, nebbiolo
Code
Alles anzeigen<style type="text/css"> main { background: transparent; border-color: transparent; } #gallery { position: relative; background: none; border: none; } #gallery figure { position: absolute; top: 0; left: 0; z-index: 1; -webkit-animation: wechseln 15s infinite; animation: wechseln 15s infinite; } @keyframes wechseln { 0% {opacity: 1;} 25% {opacity: 1;} 40% {opacity: 0;} 92% {opacity: 0;} 100% {opacity: 1;} } @-webkit-keyframes wechseln { 0% {opacity: 1;} 25% {opacity: 1;} 40% {opacity: 0;} 92% {opacity: 0;} 100% {opacity: 1;} } #gallery figure:nth-of-type(2) { animation-delay: 5s; } #gallery figure:nth-of-type(1) { animation-delay: 10s; } </style>PHP
Alles anzeigen<main> <div id="gallery"> <figure> <img src="<?echo $bild1 ;?>" alt="bild1"></figure> <figure> <img src="<?echo $bild2 ;?>" alt="bild2"></figure> <figure> <img src="<?echo $bild3 ;?>" alt="bild3"></figure> <figure> <img src="<?echo $bild4 ;?>" alt="bild4"></figure> <figure> <img src="<?echo $bild5 ;?>" alt="bild5"></figure> <figure> <img src="<?echo $bild6 ;?>" alt="bild6"></figure> <figure> <img src="<?echo $bild7 ;?>" alt="bild7"></figure> <figure> <img src="<?echo $bild8 ;?>" alt="bild8"></figure> </div> </main>