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

Compétences en diaporama effect_javascript pur javascript mobile-first

WBOY

Libérer： 2016-05-16 15:34:09

original

1567 Les gens l'ont consulté

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.

<link rel="stylesheet" href="path/to/wallop.css">
<script src="path/to/Wallop.min.js"></script>

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.

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

Copier après la connexion

Plug-in d'initialisation

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

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 :

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

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
 // => <div class="Wallop">…</div>
 
 // event.detail.currentItemIndex
 // => 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.