JS Animated. Wie ändert man die Geschwindigkeit, Übergangseffekte und andere Optionen des Sliders Camera

Wir stellen Ihnen mit Stolz das neue Video-Tutorial über Camera Slideshow vor. Es ist ein bekanntes jQuery Plugin, das unsere Vorlagen-Entwickler häufig als Slider nutzen.

Manchmal möchten wir mit der Slideranimation experimentieren. In diesem Tutorial machen wir kleine Übericht einiger Optionen und Eingenschaften des Skriptes Camera slideshow (automatische Wiedergabe, Geschwindigkeit und Übergangseffekte zwischen den Dias.

Also, öffnen Sie die Datei camera.js aus dem Ordner "site/js" über den Texteditor/Code-Editor, zum Beispiel Notepad++, und fangen wir an zu bearbeiten!

Achtung: einige Optionen, die Sie in der Datei camera.js finden, können in Ihrer Vorlage nicht aktiv sein. Es hängt von dem bestimmten Seitenlayout, verwendeten Regeln CSS, Skripts usw. ab.

Automatische Wiedergabe

autoAdvance – diese Option definiert, ob die Diashow automatisch gestartet wird.

Um die automatische Wiedergabe zu aktivieren, nutzen Sie:

autoAdvance = true;

Um die automatische Wiedergabe zu deaktivieren, schreiben Sie das Folgende:

autoAdvance = false;

Geschwindigkeit

es gibt zwei Möglichkeiten, um die Geschwindigkeit des Sliders einzustellen: time (Zeit) und transPeriod (Übergang).

time – definiert den Zeitraum zwischen dem Diawechsel. Das bedeutet die Zeit jedes Dias in Millisekunden.

transPeriod – die Dauer des Übergangseffektes in Millisekunden.

Beispiel:

time: 7000,
transPeriod: 2000,

Mit diesem Code werden Dias 7 Sekunden angezeigt, und der Diawechsel wird Sekunden dauern.

Übergangseffekte

Nutzen Sie die Option fx, um den Übergangseffekt zu ändern, hinzuzufügen oder zu löschen.

Um Effekte zu verbinden, trennen Sie die Namen durch Kommas.

Beispiel:

fx: 'simpleFade, mosaic',

Dieser Code wird zufällig den Effekt simpleFade (Verfärbung) oder mosaic (Mosaik) beim Diawechsel verwenden.

Anzahl der Zeilen/Spalten

Einige Effekte, zum Beispiel mosaic, nutzen 2 Optionen für die Anzahl von Zeilen und Spalten.

Beispiel:

cols: 6,
rows: 4,

Um mehr Eigenschaften und Beispiele zu erfahren, lesen Sie Kommentare in der Datei camera.js oder besuchen Sie Entwicklerwebsite Camera slideshow.

Vielen Dank für Ihre Aufmerksamkeit. Bewerten Sie, bitte, diesen Artikel und wenden Sie sich an uns mit jeder Fragen.

Sie können auch das ausführliche Video-Tutorial nutzen: