Compétences en diaporama effect_javascript pur javascript mobile-first-js tutoriel-php.cn

Maison

interface Web

js tutoriel

Compétences en diaporama effect_javascript pur javascript mobile-first

May 16, 2016 pm 03:34 PM

Bref tutoriel
wallop est un plugin de diaporama JavaScript pur pour mobile. Ce plug-in de diaporama n'a qu'une taille de 4 Ko. Son principe est simplement d'ajouter et de supprimer les classes appropriées pour les éléments HTML afin de les afficher et de les masquer. Quant à ces styles de classe, vous pouvez les personnaliser entièrement. Les fonctionnalités incluent :
Le mobile d'abord
Les effets d'animation et de transition sont générés à l'aide de CSS
Léger, seulement en taille 4k
Très flexible et évolutif
Événements et API personnalisables
Aucune dépendance externe

Comment utiliser
Pour utiliser ce plug-in de diaporama, vous devez d'abord introduire les fichiers wallop.css et Wallop.min.js.

&lt;link rel="stylesheet" href="path/to/wallop.css"&gt;
&lt;script src="path/to/Wallop.min.js"&gt;&lt;/script&gt;

Copier après la connexion

Structure HTML

La structure HTML de base de cette diapositive est la suivante. Vous pouvez ajouter la classe .Wallop-item--current à la première diapositive.

&lt;div class="Wallop"&gt;
 &lt;div class="Wallop-list"&gt;
  &lt;div class="Wallop-item"&gt;…&lt;/div&gt;
  &lt;div class="Wallop-item"&gt;…&lt;/div&gt;
  &lt;div class="Wallop-item"&gt;…&lt;/div&gt;
  &lt;div class="Wallop-item"&gt;…&lt;/div&gt;
  &lt;div class="Wallop-item"&gt;…&lt;/div&gt;
 &lt;/div&gt;
 &lt;button class="Wallop-buttonPrevious"&gt;Previous&lt;/button&gt;
 &lt;button class="Wallop-buttonNext"&gt;Next&lt;/button&gt;
&lt;/div&gt;

Copier après la connexion

Plug-in d'initialisation

&lt;script&gt;
 var wallopEl = document.querySelector('.Wallop');
 var slider = new Wallop(wallopEl);
&lt;/script&gt;

Copier après la connexion

Ajouter des effets d'animation

Ce plug-in de diaporama n'a pas d'effets de transition d'animation par défaut. Si vous devez ajouter des effets d'animation, vous devez introduire le fichier wallop-animation.css correspondant et ajouter la classe Wallop--xxxx à l'élément. Par exemple, pour ajouter un effet de fondu :

&lt;head&gt;
 &lt;link rel="stylesheet" href="path/to/wallop.css"&gt;
 &lt;link rel="stylesheet" href="path/to/wallop-fade.css"&gt;
&lt;/head&gt;        
&lt;div class="Wallop Wallop--fade"&gt;
...
&lt;/div&gt;

Copier après la connexion

Types d'animation disponibles

Les types d'animation de transition disponibles pour cette diapositive sont :
Wallop--glisser
Wallop - fondu
Wallop - échelle
Wallop--rotation
Wallop--fold
Wallop--diapositive-verticale
Ci-dessus sont quelques types d'animation de transition intégrés, et vous pouvez également personnaliser votre propre animation de transition.
Paramètres de configuration
Voici quelques paramètres de configuration disponibles :
boutonPreviousClass : 'Wallop-buttonPrevious'
boutonNextClass : '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'
carrousel : vrai
Méthode
Le plugin Wallop slideshow fournit quelques méthodes de base pour le contrôle des boutons :
allerÀ

Permet de passer à la diapositive à l'index spécifié.

var slider = document.querySelector('.Wallop');
var Wallop = new Wallop(slider);
 
// 跳转到第二个slide（index从0开始）
Wallop.goTo(1);

Copier après la connexion

Passez à la diapositive suivante.

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

Copier après la connexion

Passez à la diapositive précédente.

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

Copier après la connexion

Événement
Wallop émet un événement à chaque fois que la diapositive change et renvoie un objet de détail contenant l'index de la diapositive actuelle et l'objet Wallop.

var slider = document.querySelector('.Wallop');
var Wallop = new Wallop(slider);
 
Wallop.on('change', function(event) {
 // event.detail.wallopEl
 // =&gt; &lt;div class="Wallop"&gt;…&lt;/div&gt;
 
 // event.detail.currentItemIndex
 // =&gt; number
});

Copier après la connexion

Ce qui précède est le processus de création d'effets de diaporama purement JavaScript pour mobile partagé avec vous. J'espère qu'il pourra vous aider à créer de plus beaux effets de diaporama.

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn