Bilder austauschen

[Dory]

Guten Abend,

ist es möglich 6 Bilder untereinander rotieren zu lassen? Würde das ganze gerne ohne Reload machen, irgendwie mit einem coolen Effekt. Gibt es vielleicht etwas fertiges? Mit jQuery und Javascript kenne ich mich leider noch gar nicht aus.

<p class="referenzen">
  <img src="referenzen/1.jpg" alt="Beschreibung 1">
  <img src="referenzen/2.jpg" alt="Beschreibung 2">
  <img src="referenzen/3.jpg" alt="Beschreibung 3">
  <img src="referenzen/4.jpg" alt="Beschreibung 4">
  <img src="referenzen/5.jpg" alt="Beschreibung 5">
  <img src="referenzen/6.jpg" alt="Beschreibung 6">
</p>

[robertroth]

Liebe Mitdenker, liebe Wissende, liebe Neugierige,

Guten Abend,

ist es möglich 6 Bilder untereinander rotieren zu lassen? Würde das ganze gerne ohne Reload machen, irgendwie mit einem coolen Effekt. Gibt es vielleicht etwas fertiges? Mit jQuery und Javascript kenne ich mich leider noch gar nicht aus.

<p class="referenzen">
  <img src="referenzen/1.jpg" alt="Beschreibung 1">
  <img src="referenzen/2.jpg" alt="Beschreibung 2">
  <img src="referenzen/3.jpg" alt="Beschreibung 3">
  <img src="referenzen/4.jpg" alt="Beschreibung 4">
  <img src="referenzen/5.jpg" alt="Beschreibung 5">
  <img src="referenzen/6.jpg" alt="Beschreibung 6">
</p>

Guck doch mal hier
http://wiki.selfhtml.org/wiki/JavaScript/Tutorials/Fader-Framework

Spirituelle Grüße
Euer Robert
[e-mail]

[( HAL )]

Hallo Robert

Guck doch mal hier
http://wiki.selfhtml.org/wiki/JavaScript/Tutorials/Fader-Framework

Nichts für ungut, aber ich habe da so meine Zweifel, ob dieses Tutorial hier wirklich (und vor allem uneingeschränkt und unkommentiert) so hilfreich ist...

Erstens setzt es Fähigkeiten in JavaScript voraus, die nach dem eigenen Bekunden des TO hier nicht gegeben sind, und zweitens erscheint mir dieses Tutorial doch etwas angestaubt zu sein:

Ich meine: Animieren in JavaScript? - Und auch noch mit setTimeout( ) oder setInterval( )? - Wirklich?

Mal abgesehen davon, dass es mit requestAnimationFrame( ) mittlerweile eine deutlich performantere Alternative gäbe, halte ich es grundsätzlich für völlig unnötig und mithin für bad practice, so wie in diesem Tutorial beschrieben die Animationen über JavaScript zu steuern!

Statt Style-Eigenschaften über JavaScript zu setzen und sich mit dem Timing einen abzubrechen würde ich eher empfehlen, einmal einen Blick auf die Möglichkeiten von Animationen in CSS zu werfen, und für „coole Effekte“ vielleicht auch noch auf CSS-Transformationen.

Solange keine Benutzerinteraktion gefordert ist, lässt sich sowas komplett ohne JavaScript machen, und falls doch gewünscht ist, dass der Benutzer in die Steuerung eingreifen kann, dann sollte dies so umgesetzt werden, dass nur die Klasse der Elemente in JavaScript gewechselt wird.

Wenn es zum Beispiel nur um den in dem Tutorial beschriebenen „Fader-Effekt“ geht, also lediglich Bilder in regelmäßigen Abständen übergeblendet werden sollen, dann wäre die Umsetzung mit CSS mit ein wenig Übung echt kein Problem:

Einfach die Bilder innerhalb ihres Elternelementes mit position: absolute exakt gleich positionieren, so dass sie genau übereinander liegen (wobei noch erwähnt sei, dass hierfür das Elternelement ebenfalls positioniert werden muss)...

...dann mit animation-duration einen Wert für die gesamte Dauer der Animation festlegen, also die Zeit, wie lange es dauert, bis alle Bilder den Zyklus einmal durchlaufen haben...

...mit animation-iteration-count: infinite; dafür sorgen, dass nach dem letzten Bild die Geschichte wieder von vorne anfängt...

...und dann mittels @keyframe jedem Bild einen Zeitabschnitt zuweisen, indem es sichtbar ist, beispielsweise:

@keyframe fadePic1 {
  0% {opacity: 0}
  5% {opacity: 1}
 15% {opacity: 1}
 20% {opacity: 0}
100% {opacity: 0}
}

@keyframe fadePic2 {
  0% {opacity: 0}
 15% {opacity: 0}
 20% {opacity: 1}
 30% {opacity: 1}
 35% {opacity: 0}
100% {opacity: 0}
}

...wobei das wahrscheinlich auch noch etwas eleganter geht (habe mich schon länger nicht damit befasst).

Jedenfalls würde ich empfehlen, die beiden von mir verlinkten Seiten aus dem selfWiki einmal etwas genauer zu studieren und mit der Materie zu experimentieren, um dann gegebenenfalls noch einmal unter den entsprechenden Begriffen in der Suchmaschine der Wahl nach einschlägigen Beispielen zu suchen.

Ein wenig Eigenengagement vorausgesetzt, wird sich so IMHO auch ohne JavaScript eine (vermutlich mehr als) befriedigende Lösung finden.

Gruß,

HAL

[robertroth]

Liebe Mitdenker, liebe Wissende, liebe Neugierige,

super Idee!

Du hast das <I> gewonnen. ;-)

Spirituelle Grüße
Euer Robert
[e-mail]

[JürgenB]

Hallo Dory,

ich frage erst mal nach, was du genau willst. Aus deiner Frage ergeben sich für mich drei Möglichkeiten:

• Du willst die Bilder wie ein Laufband rotieren lassen. Im Zeittakt rutschen die Bilder hoch und das oberste ans Ende.
• Bis auf eins sind die Bilder unsichtbar und im Zeittakt wird jedes mal ein anderes Bild "nach oben" geholt.
• Du willst bei jedem Neuladen der Seite ein anderes (zufällig ermitteltes) Bild anzeigen.

Beschreibe mal etwas genauer, wie deine Problemstellung ist.

Gruß Jürgen

[Dory]

Hallo Jürgen ,

• Du willst die Bilder wie ein Laufband rotieren lassen. Im Zeittakt rutschen die Bilder hoch und das oberste ans Ende.
• Bis auf eins sind die Bilder unsichtbar und im Zeittakt wird jedes mal ein anderes Bild "nach oben" geholt.
• Du willst bei jedem Neuladen der Seite ein anderes (zufällig ermitteltes) Bild anzeigen.

auf meiner Seite habe ich 6 Bilder

<p class="referenzen">
  <img src="referenzen/1.jpg" alt="Beschreibung 1">
  <img src="referenzen/2.jpg" alt="Beschreibung 2">
  <img src="referenzen/3.jpg" alt="Beschreibung 3">
  <img src="referenzen/4.jpg" alt="Beschreibung 4">
  <img src="referenzen/5.jpg" alt="Beschreibung 5">
  <img src="referenzen/6.jpg" alt="Beschreibung 6">
</p>

Jetzt möchte ich folgendes erreichen:

Einzelne Bilder sollen sich der Reihe nach wechseln. Z.B. Bild 1 wechselt mit Bild 4, dann kurze Pause, dann wechselt Bild 5 mit Bild 2 usw.. (muss keine genaue Reihenfolge haben). Das ganze vielleicht mit einem kleinen Effekt.

[Gunnar Bittersmann]

@@Dory

Gibt es vielleicht etwas fertiges?

„Slider“ ist dein Suchbegriff.

Dummerweise verlangen die meisten, die du finden wirst, jQuery.

LLAP 🖖