Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development
Code

Erstellen eines jQuery Image Scroller

by
Difficulty:IntermediateLength:LongLanguages:

German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)

In diesem Tutorial werden wir einen Bild-Scroller erstellen, der die hervorragenden Animationsfunktionen von jQuery nutzt und im Allgemeinen Spaß mit Code hat. Bildlaufwerke sind natürlich nichts Neues; Versionen von ihnen kommen die ganze Zeit heraus. Viele von ihnen sind jedoch vom Benutzer initiiert. Dies bedeutet, dass der Besucher auf eine Schaltfläche klicken oder eine andere Aktion ausführen muss, damit sich der aktuell angezeigte Inhalt ändert. Dieser Scroller unterscheidet sich darin, dass er vollständig autonom ist und nach dem Laden der Seite mit dem Scrollen beginnt.


Das fertige Widget ist vollständig browserübergreifend und funktioniert in den neuesten Versionen aller gängigen Browser wie erwartet. Wir werden auch einige Interaktionen einbauen, indem wir Steuerelemente hinzufügen, mit denen der Besucher die Richtung der Animation ändern kann. Wir werden in diesem Tutorial nur mit jQuery und ein wenig HTML und CSS arbeiten und sollten in der Lage sein, die Beispiele ohne ein vollständiges Webserver-Setup auszuführen.


Anfangen

Lassen Sie uns zunächst die zugrunde liegende HTML-Seite erstellen. Fügen Sie auf einer neuen Seite in Ihrem Texteditor den folgenden Code hinzu:

Speichern Sie dies als imageScroller.html in einem neuen Ordner. Wir verlinken auf ein benutzerdefiniertes Stylesheet im Kopf der Seite, das wir in Kürze codieren werden, und fügen am Ende der Seite einen Link zur gehosteten Version der neuesten Version von jQuery hinzu. Das Laden von Skripten am Ende des Körpers ist eine anerkannte Technik zur Verbesserung der Leistung Ihrer Seite und sollte daher nach Möglichkeit geübt werden.

Unser Widget besteht aus einer Reihe verschachtelter Container und einer Reihe von Bildern, die in Links eingeschlossen sind. Die in den Containern platzierten Bilder werden aus Gründen der Barrierefreiheit fest in die Seite codiert. Wir werden die Bilder nicht dynamisch abrufen. Alle im Widget platzierten Bilder werden automatisch gescrollt (vorausgesetzt, sie werden in einen Link mit dem entsprechenden Klassennamen eingeschlossen).

Der äußerste Container wird hauptsächlich für Positions- und Anzeigezwecke verwendet, während der nächste Container zum Dekorieren des Widgets mit einem Hintergrundbild verwendet wird. Der äußere Container ist auch erforderlich, um die Steuerelemente anzuhängen, damit sie im IE korrekt über dem Inhalt angezeigt werden.

Der innerste Container ist das Element, mit dem die Bilder angezeigt werden. Dieses Element erhält die Klasse js-disabled, die nur für Besucher verwendet wird, bei denen JavaScript deaktiviert ist. Wir werden diese Klasse verwenden, um jedes der Bilder mit CSS zu verkleinern, damit sie alle sichtbar sind.

Die Bilder haben alle eine einheitliche Größe, und die Behälter werden so dimensioniert, dass sie recht ordentlich untergebracht werden können. Die Bildgröße wird auch in dem Skript verwendet, das wir hinzufügen werden. Ich werde speziell hervorheben, wo diese Verweise vorkommen, aber Sie sollten sich bewusst sein, dass, wenn Sie Bilder einer anderen Größe verwenden möchten, das Skript und die Größe der Container entsprechend angepasst werden müssen.


Styling des Widgets

Nach dem Link zu jQuery haben wir ein benutzerdefiniertes Skriptelement mit der Verknüpfung jQuery document.ready, das darauf wartet, dass wir den Code hinzufügen, der das Widget zum Leben erweckt. Bevor wir dies jedoch tun, fügen wir einfach das CSS schnell hinzu. Fügen Sie in einer anderen neuen Datei in Ihrem Texteditor die folgenden Selektoren und Stilregeln hinzu:

Wenn JavaScript deaktiviert ist und die Seite geladen wird, können alle Bilder angezeigt werden

Speichern Sie dies als imageScroller.css im selben Ordner wie die Webseite. Zuerst haben wir den Klassenselektor, der auf unsere js-disabled Klasse abzielt. Mit diesen Regeln skalieren wir die Bilder einfach so, dass sie klein genug sind, um entlang der Breite des Widgets nebeneinander gestapelt zu werden. Wenn JavaScript deaktiviert ist und die Seite geladen wird, können alle Bilder angezeigt werden - ein sehr schneller und einfacher Fallback, der jedoch nicht unbedingt narrensicher und mit Sicherheit nicht vollständig progressiv ist. Die für Breite und Höhe angegebenen Werte müssen je nach Anzahl der Bilder im Viewer variieren.

Im Anschluss haben wir die Selektoren und Regeln, die das Widget formatieren und es korrekt funktionieren lassen. Der größte Teil des Codes dient ausschließlich Anzeigezwecken, Hintergrundbildern, Farben usw. Eine wichtige Regel, auf die sich die Implementierung stützt, um ordnungsgemäß zu funktionieren, ist die Einstellung des overflow: hidden im inneren Viewer-Container. Dadurch werden die Bilder, die noch angezeigt werden müssen, und die Bilder, die bereits durch den Betrachter gegangen sind, ausgeblendet. Zu diesem Zeitpunkt, wenn wir die Seite starten, sollten wir ungefähr Folgendes sehen:

Finished Product

Einige der CSS, die wir in Kürze in JavaScript festlegen werden, und einige der Elemente, auf die wir im CSS abzielen, sind noch nicht vorhanden, aber dies ist alles, was in die CSS-Datei aufgenommen werden muss.


Das Widget zum Leben erwecken

In der letzten Phase dieses Tutorials fügen wir das JavaScript mit jQuery-Geschmack hinzu, mit dem das Widget funktioniert und das gewünschte Verhalten erzielt wird. Fügen Sie in der leeren anonymen Funktion am Ende der HTML-Seite den folgenden Code hinzu:

Zunächst entfernen wir die Klasse js-disabled aus dem Viewer-Container. Als nächstes erstellen wir einen neuen Container, der alle Bilder enthält, die im Widget gefunden werden. Der Hauptgrund dafür ist, dass wir nicht jedes Bild einzeln animieren müssen, was zu einer potenziell großen Anzahl von gleichzeitig ausgeführten Animationen führt, sondern nur ein Element animieren müssen - den Container, den wir gerade erstellen.

Die Breite des neuen Containers wird auf die Anzahl der Bilder multipliziert mit der Breite jedes Bilds festgelegt, die in diesem Beispiel 170 Pixel beträgt. Dies ist eines der Code-Bits, die ich zuvor erwähnt habe und die ich ausdrücklich erwähnen möchte. Es muss geändert werden, wenn wir Bilder mit einer anderen Größe verwenden möchten. Die Höhe des Containers wird auch speziell auf die Höhe jedes Bildes eingestellt.

Es ist später im Skript hilfreich, bestimmte Dinge über die Art der Animation zu wissen, wie z. B. ihre Geschwindigkeit, die Dauer und die Fahrtrichtung. Daher legen wir als Nächstes eine Reihe von Variablen fest, in denen diese Informationen gespeichert werden Die Dauer entspricht genau einer Sekunde pro Bild und basiert wiederum auf der Anzahl der im Widget gefundenen Bilder.

Die Geschwindigkeit ist leicht zu ermitteln, da es sich natürlich um die Fahrstrecke geteilt durch die Fahrdauer handelt. In diesem Beispiel beträgt die genaue Geschwindigkeit der Animation 0,274 Pixel pro Millisekunde. Die letzte Variable, Richtung, ist eine einfache Zeichenfolge, die angibt, dass die Animation von rechts nach links verläuft, obwohl wir dies leicht in ltr ändern können, wenn wir dies wünschen.

Schließlich setzen wir die Startposition des neuen Containers; Da die Animation derzeit auf RTL eingestellt ist, müssen wir den neuen Bildcontainer so positionieren, dass sein linker Rand auf den rechten Rand des Betrachters eingestellt ist. Wenn wir die Animation jedoch auf ltr setzen, wird der rechte Rand des Elements am linken Rand des Containers ausgerichtet. Wir bestimmen die Richtung unter Verwendung der ternären JavaScript-Bedingung. Neben seiner Position geben wir dem neuen Container auch einen Klassennamen, der seiner Richtung entspricht und auf den wir an verschiedenen Stellen im Skript testen können.

Als nächstes müssen wir eine neue Funktion definieren, um die Animation zu initiieren und fortzusetzen. Während der normalen Ausführung des Skripts müssen verschiedene Male mit der Animation begonnen werden. Wenn Sie diese Funktionalität also in eine Funktion einbinden, die wir bei Bedarf aufrufen können, können Sie die Codemenge reduzieren. Fügen Sie den folgenden Code hinzu:

Die Animatorfunktion akzeptiert drei Argumente, das zu animierende Element, die Zeitdauer, für die die Animation ausgeführt werden soll, und die Richtung, in die das Element animiert werden soll. Die Funktion ist in zwei verschiedene Blöcke unterteilt, einen für die RTL-Animation und einen für die LTR-Animation.

Innerhalb jedes Blocks der Bedingung aktualisieren wir den Klassennamen des Bildcontainers, um die aktuelle Richtung wiederzugeben, falls sich die Richtung geändert hat (dies ist eine der vom Besucher initiierten Interaktionen).

Anschließend definieren wir die Animation, indem wir den Bildcontainer plus für ltr oder minus für rtl um die Breite des Bildcontainers verschieben, um den Eindruck zu erwecken, über den Betrachter zu gleiten. Leider können wir die eingebauten langsamen, normalen oder schnellen Animationen nicht verwenden, da selbst die langsame Einstellung die Animation auf eine Gesamtlaufzeit von nur 600 Millisekunden beschränkt, was selbst für die geringe Anzahl der verwendeten Bilder viel zu schnell ist in diesem Beispiel.

Wir geben die lineare Zeichenfolge als drittes Argument der Animationsmethode an, bei der es sich um die zu verwendende Beschleunigungsfunktion handelt, und stellen die Animation so ein, dass sie von Anfang bis Ende mit einer gleichmäßigen Geschwindigkeit abläuft. Wenn wir dies nicht einstellen, wird die Animation zu Beginn bzw. am Ende der Animation merklich beschleunigt und verlangsamt.

Schließlich fügen wir eine anonyme Rückruffunktion hinzu, die ausgeführt wird, sobald die Animation endet. Innerhalb dieser Rückruffunktion bringen wir den Bildcontainer wieder in seine Ausgangsposition, rufen die Animatorfunktion rekursiv erneut auf und übergeben die richtigen Einstellungen, je nachdem, welcher Zweig der Bedingung ausgeführt wird, und blenden das Bedienfeld aus, wenn es sichtbar ist. Wir haben den Code, der das Control Panel erstellt, noch nicht hinzugefügt, aber wir müssen diesen Code hier noch hinzufügen, wenn wir ihn haben.

Um die Animation zu starten, wenn die Seite geladen ist, müssen wir jetzt die gerade definierte Funktion aufrufen. Fügen Sie den folgenden Funktionsaufruf hinzu:

Wir rufen lediglich die Funktion auf, die das zu animierende Element übergibt, und die Variablen, die wir im ersten Codeabschnitt festgelegt haben. Wenn wir die Seite jetzt ausführen, sollten wir feststellen, dass die Animation startet, sobald die Seite geladen wurde und unbegrenzt fortgesetzt wird, wie im folgenden Screenshot gezeigt (Art):

Finished Product

Interaktion hinzufügen

Wir sind jetzt in der Phase, in der wir über die Kernfunktionalität des Widgets verfügen und die zusätzliche Interaktivität hinzufügen können, die es ansprechend macht. Fügen Sie nach dem Aufruf der Animatorfunktion den folgenden Code hinzu:

Wie aus dem Kommentar hervorgeht, stoppt dieser Ereignishandler die Animation, wenn der Besucher den Zeiger auf eines der Bilder im Widget bewegt.

Wir verwenden die Live-Methode jQuery (neu in 1.3!), Um den Handler an die Elemente anzuhängen und eine anonyme Funktion anzugeben, die ausgeführt werden soll, wenn das Ereignis eintritt.

Innerhalb dieser Funktion stoppen wir zuerst die Animation mit der jQuery-Stoppmethode und übergeben einen echten Booleschen Wert als Argument. Dieses Argument bricht die Animationswarteschlange ab, falls vorhanden. Es sollte nicht funktionieren, da es immer nur eine Animation geben sollte, aber es ist nützlich, dieses Argument nur für den Fall zu verwenden.

Wir prüfen, ob das Control Panel bereits vorhanden ist, und geben, sofern dies nicht der Fall ist, ein neues div-Element an. Geben Sie ihm eine ID, damit es unsere Stilregeln aufgreift und an den äußeren Container anfügt. Anschließend verwenden wir die CSS-Methode von jQuery, um die Deckkraft browserübergreifend festzulegen, damit Sie nicht mit unserem CSS auf verschiedene Browser abzielen müssen, und schieben die Steuerelemente nach unten.

Wir erstellen auch einige Links und hängen sie an das Control Panel an. Diese Links dienen als Schaltflächen, mit denen der Besucher die Bewegungsrichtung der Bilder ändern kann. Wir werden gleich Handler für diese Schaltflächen hinzufügen. Schließlich erhalten wir den Inhalt des title-Attributs des Wrapper-Links, der das Mouseover-Ereignis ausgelöst hat, und erstellen ein neues Absatzelement, dessen innerer Text auf den Titel gesetzt ist. Wir verlassen uns stark auf die ternäre bedingte JavaScript-Verknüpfung in diesem Codeabschnitt, da sie einen hervorragenden Mechanismus zum Erstellen und Anhängen von Elementen bietet, wenn diese noch nicht vorhanden sind.

Möglicherweise haben Sie auch bemerkt, dass wir eine Variable festgelegt haben, die den Inhalt des Titelattributs des aktuellen Triggers enthält. Sie fragen sich möglicherweise, warum wir stattdessen nicht den folgenden Code verwenden:

Der Grund dafür ist, dass es keine Unklarheit darüber gibt, worauf sich $(this) bezieht. Die Verwendung des obigen Codes funktioniert zwar, wirft jedoch Fehler auf, die zwar nicht schwerwiegend sind, für potenzielle Benutzer des Widgets jedoch nicht so beruhigend. Durch die Verwendung der Variablen wird lediglich sichergestellt, dass diese Fehler vermieden werden. Wenn das Bedienfeld sichtbar ist, wird es wie im folgenden Screenshot angezeigt:

Finished Product

Nach dem Mouseover wird die Animation gestoppt. Wir können es einfach mit einem Mouseout-Ereignishandler erneut starten, den wir als nächstes hinzufügen sollten:

Wieder verwenden wir die Live-Methode von jQuery, aber dieses Mal übergeben wir auch das rohe Ereignisobjekt an unsere anonyme Rückruffunktion. Wir verwenden dieses Objekt sofort, um festzustellen, ob sich der Zeiger auf dem Bedienfeld bewegt hat. Wenn dies nicht der Fall ist, verbergen wir die Steuerelemente. Wenn dies jedoch der Fall ist, tun wir nichts und fahren mit dem Neustart der Animation fort. Beachten Sie, wie wir ein verschachteltes Ternär verwenden, das einer if else-Bedingung entspricht.

Der Hauptzweck der anonymen Funktion besteht darin, die Animation neu zu starten. Bevor wir dies tun können, müssen wir jedoch die Dauer der Animation berechnen. Wir können den Wert nicht fest codieren, da der Bildcontainer verschoben wurde. Die anfängliche Dauer wurde für jedes Bild auf 1 Sekunde eingestellt, in diesem Beispiel auf 5 Sekunden. Wenn im Viewer nur noch ein Bild sichtbar ist und wir die Animation erneut auf 5 Sekunden einstellen, wird die Animation deutlich langsamer ausgeführt.

Wir berechnen zunächst die Gesamtentfernung, die der Bildcontainer in einer vollständigen Animation zurücklegt. Wir berechnen dann, wie viel der gesamten Strecke noch zurückgelegt werden muss. Wir müssen eine andere Berechnung durchführen, je nachdem, ob die Animation von links nach rechts oder umgekehrt ausgeführt wird. Daher verwenden wir erneut die ternäre Bedingung.

Wenn die Animation von links nach rechts erfolgt, ist die Entfernung, die nach links zurückgelegt werden muss, das linke Stilattribut des Bildcontainers (ermittelt mit der CSS-jQuery-Methode), das zur Breite des Bildcontainers addiert und von der Gesamtentfernung abgezogen wird. Wenn sich der Bildcontainer jedoch von rechts nach links bewegt, entspricht die verbleibende Entfernung zur Breite der Breite des Bildcontainers abzüglich des linken Stilattributs, abgezogen von der Gesamtentfernung. Die Methoden width und css jQuery geben Zeichenfolgenwerte zurück. Daher verwenden wir die parseInt-Funktion von JavaScript, um diese in numerische Werte zu konvertieren.

Die neue Dauer der Animation wird dann berechnet, indem die verbleibende Entfernung durch die Geschwindigkeit dividiert wird, die wir direkt am Anfang des Codes berechnet haben. Sobald wir diese Abbildung haben, können wir die Animatorfunktion erneut aufrufen und die erforderlichen Parameter übergeben, sodass die Animation an derselben Stelle, an der sie gestoppt wurde, in derselben Fahrtrichtung erneut gestartet wird.


Richtung ändern

Für den letzten Teil unseres Skripts können wir die Handler für die Links in der Systemsteuerung hinzufügen, mit denen die Richtung der Animation geändert wird. Geben Sie direkt nach dem gerade hinzugefügten Code den folgenden Code ein:

Diese Funktion, die beim Klicken auf die Schaltfläche von links nach rechts ausgelöst wird, ist relativ einfach und enthält Code, der dem bereits verwendeten sehr ähnlich ist. Wir stoppen zuerst die aktuelle Animation (sie wird fortgesetzt, wenn der Besucher den Zeiger über das Bedienfeld bewegt) und tauschen dann den Klassennamen so aus, dass er der neuen Fahrtrichtung entspricht. Wir erarbeiten dann die neue Dauer der Animation auf die gleiche Weise wie zuvor, bevor wir schließlich unsere Animatorfunktion erneut aufrufen. Dies ist nur der Handler für die ltr-Taste. Der Handler für die RTL-Taste ist nahezu identisch, verwendet jedoch die korrekte Berechnung für die entgegengesetzte Fahrtrichtung:

Dies ist nun der gesamte Code, den wir schreiben müssen. Wenn Sie die Seite zu diesem Zeitpunkt in einem Browser ausführen, sollten Sie feststellen, dass das Widget wie beabsichtigt funktioniert.


Zusammenfassung

In diesem Tutorial haben wir ein unterhaltsames und interaktives Widget zum Anzeigen einer Reihe von Bildern erstellt, mit dem Logos der Hersteller von Produkten, die Sie verkaufen, oder Logos von Software, die Sie empfehlen, oder alles andere, was Sie mögen, angezeigt werden können. Wir haben uns hauptsächlich auf die Animations- und Interaktionsaspekte des Widgets konzentriert, aber auch Dinge wie die Bereitstellung eines grundlegenden Fallbacks für den Fall, dass JavaScript im Browser deaktiviert ist.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.