Reiner Javascript-Mobile-First-Diashow-Effekt_Javascript-Kenntnisse-js-Tutorial-php.cn

Reiner Javascript-Mobile-First-Diashow-Effekt_Javascript-Kenntnisse

WBOY

Freigeben： 2016-05-16 15:34:09

Original

1567 Leute haben es durchsucht

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

Initialisierungs-Plug-in

<script>
 var wallopEl = document.querySelector('.Wallop');
 var slider = new Wallop(wallopEl);
</script>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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);

Nach dem Login kopieren

Springe zur nächsten Folie.

var slider = document.querySelector('.Wallop');
var Wallop = new Wallop(slider);
 
// 跳转到下一个slide
Wallop.next();

Nach dem Login kopieren

Springe zur vorherigen Folie.

var slider = document.querySelector('.Wallop');
var Wallop = new Wallop(slider);
 
// 跳转到前一个slide
Wallop.previous();

Nach dem Login kopieren

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
});

Nach dem Login kopieren

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.