Kurzes Tutorial
wallop ist ein reines JavaScript-Diashow-Plugin für Mobilgeräte. Dieses Diashow-Plugin ist nur 4 KB groß. Sein Prinzip besteht lediglich darin, entsprechende Klassen für HTML-Elemente hinzuzufügen und zu entfernen. Diese Klassenstile können Sie vollständig anpassen. Zu den Funktionen gehören:
Mobile first
Animations- und Übergangseffekte werden mit CSS
generiert
Leicht, nur 4K-Größe
Hochflexibel und skalierbar
Anpassbare Ereignisse und API
Keine externen Abhängigkeiten
Anwendung
Um dieses Diashow-Plug-in zu verwenden, müssen Sie zunächst die Dateien wallop.css und Wallop.min.js einführen.
<link rel="stylesheet" href="path/to/wallop.css"> <script src="path/to/Wallop.min.js"></script>
HTML-Struktur
Die grundlegende HTML-Struktur dieser Folie ist wie folgt. Sie können .Wallop-item--current class zur ersten Folie hinzufügen.
<div class="Wallop"> <div class="Wallop-list"> <div class="Wallop-item">…</div> <div class="Wallop-item">…</div> <div class="Wallop-item">…</div> <div class="Wallop-item">…</div> <div class="Wallop-item">…</div> </div> <button class="Wallop-buttonPrevious">Previous</button> <button class="Wallop-buttonNext">Next</button> </div>
Initialisierungs-Plug-in
<script>
var wallopEl = document.querySelector('.Wallop');
var slider = new Wallop(wallopEl);
</script>
Animationseffekte hinzufügen
Dieses Diashow-Plug-in verfügt standardmäßig nicht über Animationsübergangseffekte. Wenn Sie Animationseffekte hinzufügen müssen, müssen Sie die entsprechende Datei wallop-animation.css einführen und dem Element die Klasse Wallop--xxxx hinzufügen. Um beispielsweise einen Fade-Effekt hinzuzufügen:
<head> <link rel="stylesheet" href="path/to/wallop.css"> <link rel="stylesheet" href="path/to/wallop-fade.css"> </head> <div class="Wallop Wallop--fade"> ... </div>
Verfügbare Animationstypen
Die für diese Folie verfügbaren Übergangsanimationstypen sind:
Wallop--slide
Wallop – verblassen
Wallop--scale
Wallop – drehen
Wallop--fold
Wallop--vertikal-slide
Oben sind einige integrierte Übergangsanimationstypen aufgeführt. Sie können auch Ihre eigene Übergangsanimation anpassen.
Konfigurationsparameter
Hier sind einige verfügbare Konfigurationsparameter:
buttonPreviousClass: 'Wallop-buttonPrevious'
buttonNextClass: 'Wallop-buttonNext'
itemClass: 'Wallop-item'
currentItemClass: 'Wallop-item--current'
showPreviousClass: 'Wallop-item--showPrevious'
showNextClass: 'Wallop-item--showNext'
hidePreviousClass: 'Wallop-item--hidePrevious'
hideNextClass: 'Wallop-item--hideNext'
Karussell: wahr
Methode
Das Wallop-Diashow-Plugin bietet einige grundlegende Methoden zur Tastensteuerung:
goTo
Ermöglicht das Springen zur Folie am angegebenen Index.
var slider = document.querySelector('.Wallop');
var Wallop = new Wallop(slider);
// 跳转到第二个slide（index从0开始）
Wallop.goTo(1);
nächstes
Springe zur nächsten Folie.
var slider = document.querySelector('.Wallop');
var Wallop = new Wallop(slider);
// 跳转到下一个slide
Wallop.next();
vorheriges
Springe zur vorherigen Folie.
var slider = document.querySelector('.Wallop');
var Wallop = new Wallop(slider);
// 跳转到前一个slide
Wallop.previous(); Veranstaltung
Wallop gibt bei jedem Folienwechsel ein Ereignis aus und gibt ein Detailobjekt zurück, das den Index der aktuellen Folie und das Wallop-Objekt enthält.
var slider = document.querySelector('.Wallop');
var Wallop = new Wallop(slider);
Wallop.on('change', function(event) {
// event.detail.wallopEl
// => <div class="Wallop">…</div>
// event.detail.currentItemIndex
// => number
});
Das Obige ist der reine JavaScript-Prozess zur Erstellung von Diashow-Effekten, der mit Ihnen geteilt wird. Ich hoffe, er kann Ihnen dabei helfen, schönere Diashow-Effekte zu erstellen.
