Quelle est la différence entre les ports LAN et WAN et à quoi servent-ils ?

Conversion analogique-numérique pour les systèmes d'acquisition de données et les microconvertisseurs débutants

Générateur basé sur la minuterie NE555 Comment augmenter la puissance de sortie

Meizu M2 Mini: avis, spécifications et avis

Création d'un curseur de photo en utilisant du javascript pur Préparation des images pour le curseur

Nouveau cms. Quel CMS est le meilleur ? Examen des CMS payants

Une introduction au développement de diaporamas en JavaScript. Création d'un curseur de photo en utilisant du javascript pur Préparation des images pour le curseur

Si les diapositives ne contiennent que des images, vous pouvez légèrement modifier la structure :

Précédent Suivant

N'oubliez pas d'ajouter une valeur significative à l'attribut alt.

Pour utiliser les liens de page, vous pouvez procéder comme suit :

... ... ... 1 2 3

Précédent Suivant 1 2 3

Notez l'utilisation des attributs « données » : certains diaporamas peuvent insérer des images comme arrière-plan, et ces attributs seront utilisés dans le script comme emplacements pour connecter l'arrière-plan et la diapositive.

Utilisation de listes Une approche sémantiquement correcte consisterait à utiliser les éléments de liste sous forme de diapositives. Dans ce cas, la structure sera la suivante :

Si l'ordre des slides est bien défini (par exemple dans une présentation), vous pouvez utiliser des listes numérotées

CSS Commençons par la structure suivante :

Précédent Suivant

Parce que Étant donné que le diaporama s'exécutera de droite à gauche, le conteneur extérieur aura une taille fixe et celui intérieur sera plus large puisqu'il contient toutes les diapositives. La première diapositive sera visible. Ceci est défini via un débordement :

Slider (largeur : 1 024 px ; débordement : caché ; ) .slider-wrapper ( largeur : 9999px ; hauteur : 683px ; position : relative ; transition : gauche 500 ms linéaire ; )

Les styles d’emballage intérieur incluent :

Grande largeur
- hauteur fixe, hauteur de coulissement maximale
- position : relative, qui permettra de créer un mouvement de diapositive
- Transition CSS vers la gauche, ce qui rendra le mouvement fluide. Par souci de simplicité, nous n'avons pas inclus tous les préfixes. Vous pouvez également utiliser des transformations CSS (avec traduction) pour cela.

Les diapositives ont un attribut float pour les aligner. Ils sont positionnés relativement afin que vous puissiez obtenir leur décalage gauche dans JS. Nous l'utilisons pour créer un effet de glissement.

Diapositive ( float : gauche ; position : relative ; largeur : 1024px ; hauteur : 683px ; )

Bien que nous ayons défini une certaine largeur, dans le script, nous pouvons la modifier en multipliant le nombre de diapositives par la largeur de la diapositive. Vous ne savez jamais de quelle largeur vous pourriez avoir besoin.

La navigation s'effectue via les boutons « Précédent » et « Suivant ». Nous réinitialisons leurs styles par défaut et attribuons les nôtres :

Slider-nav (hauteur : 40 px ; largeur : 100 % ; marge supérieure : 1,5 em ; ) .slider-nav bouton ( bordure : aucune ; affichage : bloc ; largeur : 40 px ; hauteur : 40 px ; curseur : pointeur ; retrait du texte : -9999em ; couleur d'arrière-plan : transparent ; répétition d'arrière-plan : pas de répétition ; ) .bouton de navigation slider.slider-previous ( float : gauche ; image d'arrière-plan : url (previous.png); ) bouton .slider-nav .slider-next ( float: right; background-image: url(next.png); )

Lorsque vous utilisez des liens de page au lieu de boutons, vous pouvez créer les styles suivants :

Slider-nav (alignement du texte : centre ; marge en haut : 1,5em ; ) .slider-nav a (affichage : bloc en ligne ; décoration du texte : aucun ; bordure : 1px solide #ddd ; couleur : #444 ; largeur : 2em ; hauteur : 2em ; hauteur de ligne : 2 ; alignement du texte : centre ; ) .slider-nav a.current ( couleur de la bordure : #000 ; couleur : #000 ; poids de la police : gras ; )

Ces classes seront attribuées dynamiquement à partir du script.

Cette approche est adaptée à l'effet de glissement. Si nous voulons obtenir l'effet de fondu, nous devons modifier les styles, car float ajoute un remplissage horizontal entre les diapositives. Autrement dit, nous n'avons pas besoin de diapositives sur une seule ligne - nous avons besoin d'un « pack » de diapositives :

Slider ( largeur : 1024 px ; marge : 2em auto ; ) .slider-wrapper ( largeur : 100 % ; hauteur : 683 px ; position : relative ; /* Crée un contexte pour le positionnement absolu */ ) .slide ( position : absolue ; /* Positionnement absolu de toutes les slides */ largeur : 100% ; hauteur : 100% ; opacité : 0 ; /* Toutes les slides sont masquées */ transition : opacité 500ms linéaire ; ) /* Initialement seule la première est visible */ .slider- emballage >
Nous utilisons la propriété opacity pour masquer les diapositives, car les lecteurs d'écran ignoreront le contenu des éléments qui ont display: none (voir CSS en action : contenu invisible réservé aux utilisateurs de lecteurs d'écran).

Grâce au positionnement contextuel CSS, nous avons créé une « pile » de slides, la dernière slide du source étant devant les autres. Mais ce n'est pas ce dont nous avons besoin. Pour conserver l'ordre des diapositives, nous devons masquer toutes les diapositives sauf la première.

JS utilise la transition CSS, modifiant la valeur de la propriété d'opacité de la diapositive actuelle et réinitialisant cette valeur à zéro pour toutes les autres.

Code JavaScript Diaporama sans pagination Le diaporama sans pagination fonctionne en cliquant sur les boutons « Suivant » et « Précédent ». Ils peuvent être considérés comme des opérateurs d’incrémentation et de décrémentation. Il y a toujours un pointeur (ou curseur) qui augmentera ou diminuera chaque fois que vous appuierez sur les boutons. Sa valeur initiale est 0 et le but est de sélectionner la diapositive actuelle de la même manière que les éléments du tableau sont sélectionnés.

Ainsi, lorsque nous cliquons sur Suivant une première fois, le pointeur augmente de 1 et nous obtenons une deuxième diapositive. En cliquant sur Précédent, nous réduisons le pointeur et obtenons la première diapositive. Etc.

Avec le pointeur, nous utilisons la méthode .eq() de jQuery pour obtenir la diapositive actuelle. En JS pur, cela ressemble à ceci :

Fonction Slideshow(element) ( this.el = document.querySelector(element); this.init(); ) Slideshow.prototype = ( init: function() ( this.slides = this.el.querySelectorAll(".slide") ; //... ), _slideTo: function(pointer) ( var currentSlide = this.slides; //... ) );

N'oubliez pas : NodeList utilise les index comme un tableau. Une autre façon de sélectionner la diapositive actuelle consiste à utiliser les sélecteurs CSS3 :

Slideshow.prototype = ( init: function() ( //... ), _slideTo: function(pointer) ( var n = pointeur + 1; var currentSlide = this.el.querySelector(".slide:nth-child(" + n + ")"); //... ) );

Le sélecteur CSS3:nth-child() compte les éléments à partir de 1, vous devez donc ajouter un 1 au pointeur. Après avoir sélectionné une diapositive, son conteneur parent doit être déplacé de droite à gauche. Dans jQuery, vous pouvez utiliser la méthode .animate() :

(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( wrapper : ".slider-wrapper", slides : ".slide", //... vitesse : 500, assouplissement : "linéaire" ), options); var slideTo = function(slide, element) ( var $currentSlide = $(options.slides, element).eq(slide); $(options.wrapper, element). animate(( gauche : - $currentSlide.position().left ), options.speed, options.easing); ); //... ); ))(jQuery);

Il n'y a pas de méthode .animate() dans le JS standard, nous utilisons donc des transitions CSS :

Slider-wrapper ( position : relative ; // transition requise : gauche 500 ms linéaire ; )

Vous pouvez maintenant modifier la propriété left de manière dynamique via l'objet style :

Nous devons maintenant créer un événement click pour chaque contrôle. Dans jQuery, vous pouvez utiliser la méthode .on() et dans JS pur, vous pouvez utiliser la méthode addEventListener().

Vous devez également vérifier si le pointeur a atteint les limites de la liste - 0 pour « Précédent » et le nombre total de diapositives pour « Suivant ». Dans chaque cas, vous devez masquer le bouton correspondant :

(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( wrapper : ".slider-wrapper", slides : ".slide", précédent : ".slider-previous", suivant : ".slider-next", //... vitesse : 500, assouplissement : "linear" ), options); var slideTo = function(slide, element) ( var $currentSlide = $(options.slides, element). eq(slide); $(options.wrapper, element).animate(( left: - $currentSlide.position().left ), options.speed, options.easing); ); return this.each(function() ( var $element = $(this), $previous = $(options.previous, $element), $next = $(options.next, $element), index = 0, total = $(options.slides).length; $next.on("clic", function() ( index++; $previous.show(); if(index == total - 1) ( index = total - 1; $next.hide(); ) slideTo(index, $element); )); $previous.on("click", function() ( index--; $next.show(); if(index == 0) ( index = 0; $previous.hide(); ) slideTo(index, $element); )); )); ); ))(jQuery);

Et en JS pur, cela ressemble à ceci :

Fonction Slideshow(element) ( this.el = document.querySelector(element); this.init(); ) Slideshow.prototype = ( init: function() ( this.wrapper = this.el.querySelector(".slider-wrapper "); this.slides = this.el.querySelectorAll(".slide"); this.previous = this.el.querySelector(".slider-previous"); this.next = this.el.querySelector(".slider -next"); this.index = 0; this.total = this.slides.length; this.actions(); ), _slideTo: function(pointer) ( var currentSlide = this.slides; this.wrapper.style.left = "-" + currentSlide.offsetLeft + "px"; ), actions : function() ( var self = this; self.next.addEventListener("click", function() ( self.index++; self.previous.style. display = "block"; if(self.index == self.total - 1) ( self.index = self.total - 1; self.next.style.display = "none"; ) self._slideTo(self.index ); ), false); self.previous.addEventListener("click", function() ( self.index--; self.next.style.display = "block"; if(self.index == 0) ( self .index = 0;self.previous.style.display = "aucun"; ) self._slideTo(self.index); ), FAUX); ) );

Diaporama paginé Dans ce type de diaporama, chaque lien est responsable d'une diapositive, il n'y a donc pas besoin d'index. Les animations ne changent pas, contrairement à la façon dont l'utilisateur se déplace dans les diapositives. Pour jQuery nous aurons le code suivant :

(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( wrapper : ".slider-wrapper", slides : ".slide", navigation : ".slider-nav", vitesse : 500, assouplissement : "linéaire" ), options); var slideTo = function(slide, element) ( var $currentSlide = $(options.slides, element).eq(slide); $(options.wrapper, element). animate(( left: - $currentSlide.position().left ), options.speed, options.easing); ); return this.each(function() ( var $element = $(this), $navigationLinks = $( "a", options.nav); $navigationLinks.on("click", function(e) ( e.preventDefault(); var $a = $(this), $slide = $($a.attr("href ")); slideTo($slide, $element); $a.addClass("current").siblings(). removeClass("current"); )); )); ))(jQuery);

Dans ce cas, chaque ancre correspond à l’ID d’une diapositive spécifique. En JS pur, vous pouvez l'utiliser à la fois ainsi que l'attribut data, qui stocke l'index numérique des diapositives dans la NodeList :

Fonction Slider(element) ( this.el = document.querySelector(element); this.init(); ) Slider.prototype = ( init: function() ( this.links = this.el.querySelectorAll("#slider-nav a"); this.wrapper = this.el.querySelector("#slider-wrapper"); this.navigate(); ), naviguer : function() ( for (var i = 0; i< this.links.length; ++i) { var link = this.links[i]; this.slide(link); } }, slide: function(element) { var self = this; element.addEventListener("click", function(e) { e.preventDefault(); var a = this; self.setCurrentLink(a); var index = parseInt(a.getAttribute("data-slide"), 10) + 1; var currentSlide = self.el.querySelector(".slide:nth-child(" + index + ")"); self.wrapper.style.left = "-" + currentSlide.offsetLeft + "px"; }, false); }, setCurrentLink: function(link) { var parent = link.parentNode; var a = parent.querySelectorAll("a"); link.className = "current"; for (var j = 0; j < a.length; ++j) { var cur = a[j]; if (cur !== link) { cur.className = ""; } } } };

Depuis IE10, vous pouvez gérer les classes via classList :

Link.classList.add("actuel");

Et avec IE11, les attributs de données peuvent être obtenus via la propriété dataset :

Var index = parseInt(a.dataset.slide, 10) + 1;

Diaporamas paginés avec contrôles Ces diaporamas présentent une certaine complexité dans le code : vous devez combiner l'utilisation de hachages d'index et de page. Autrement dit, la diapositive actuelle doit être sélectionnée en fonction à la fois de la position du pointeur et de la diapositive sélectionnée via des liens.

Cela peut être synchronisé via l'index numérique de chaque lien dans le DOM. Un lien - une diapositive, donc leurs index seront 0, 1, 2, etc.

En jQuery, le code ressemblera à ceci :

(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( //... pagination : ".slider-pagination", //... ), options); $. fn.slideshow.index = 0; renvoie this.each(function() ( var $element = $(this), //... $pagination = $(options.pagination, $element), $paginationLinks = $(" a", $pagination), //... $paginationLinks.on("click", function(e) ( e.preventDefault(); var $a = $(this), elemIndex = $a.index(); // Index numérique DOM $.fn.slideshow.index = elemIndex; if($.fn.slideshow.index > 0) ( $previous.show(); ) else ( $previous.hide(); ) if($. fn.slideshow.index == total - 1) ( $.fn.slideshow.index = total - 1; $next.hide(); ) else ( $next.show(); ) slideTo($.fn.slideshow. index, $element); $a.addClass("current"). siblings().removeClass("current"); )); )); ); //... ))(jQuery);

Vous pouvez immédiatement voir que la visibilité du curseur a changé - l'index est désormais déclaré comme propriété de l'objet diaporama. De cette façon, nous évitons les problèmes de portée qui peuvent être créés par les rappels dans jQuery. Le curseur est désormais disponible partout, même en dehors de l'espace de noms du plugin, puisqu'il est déclaré comme propriété publique de l'objet slideshow.

La méthode .index() donne l'index numérique de chaque lien.

Il n'existe pas de méthode de ce type en JS pur, il est donc plus facile d'utiliser les attributs de données :

Nous pouvons maintenant connecter nos procédures avec des références et utiliser les attributs de données que nous venons de créer :

Actions : function() ( var self = this; //... for(var i = 0; i< self.navigationLinks.length; ++i) { var a = self.navigationLinks[i]; a.addEventListener("click", function(e) { e.preventDefault(); var n = parseInt(this.getAttribute("data-index"), 10); // Или var n = parseInt(this.dataset.index, 10); self.index = n; if(self.index == 0) { self.index = 0; self.previous.style.display = "none"; } if(self.index >0) ( self.previous.style.display = "block"; ) if(self.index == self.total - 1) ( self.index = self.total - 1; self.next.style.display = "aucun "; ) else ( self.next.style.display = "block"; ) self._slideTo(self.index); self._highlightCurrentLink(this); ), FAUX); ) )

Comprendre les dimensions Revenons à la règle CSS suivante :

Slider-wrapper (largeur : 9999 px ; hauteur : 683 px ; position : relative ; transition : gauche 500 ms linéaire ; )

Si nous avons beaucoup de diapositives, 9999 ne suffiront peut-être pas. Vous devez ajuster la taille des diapositives à la volée en fonction de la largeur de chaque diapositive et du nombre de diapositives.

En jQuery c'est simple :

// Le diaporama pleine largeur renvoie this.each(function() ( var $element = $(this), total = $(options.slides).length; //... $(options.slides, $element ).width ($(window).width()); $(options.wrapper, $element).width($(window).width() * total); //... ));

Prenez la largeur de la fenêtre et définissez la largeur de chaque diapositive. La largeur totale du wrapper interne est obtenue en multipliant la largeur de la fenêtre et le nombre de diapositives.

// Le diaporama à largeur fixe renvoie this.each(function() ( var $element = $(this), total = $(options.slides).length; //... $(options.wrapper, $element) .width ($(options.slides).eq(0).width() * total); //... ));

Ici, la largeur initiale est définie sur la largeur de chaque diapositive. Il vous suffit de définir la largeur totale du wrapper.

Le conteneur intérieur est désormais suffisamment large. En JS pur, cela se fait à peu près de la même manière :

// Diaporama pleine largeur Slideshow.prototype = ( init: function() ( this.wrapper = this.el.querySelector(".slider-wrapper"); this.slides = this.el.querySelectorAll(".slide "); //... this.total = this.slides.length; this.setDimensions(); this.actions(); ), setDimensions: function() ( var self = this; // Largeur de la fenêtre var winWidth = window .innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var wrapperWidth = winWidth * self.total; for(var i = 0; i< self.total; ++i) { var slide = self.slides[i]; slide.style.width = winWidth + "px"; } self.wrapper.style.width = wrapperWidth + "px"; }, //... }; // Слайд-шоу фиксированной ширины Slideshow.prototype = { init: function() { this.wrapper = this.el.querySelector(".slider-wrapper"); this.slides = this.el.querySelectorAll(".slide"); //... this.total = this.slides.length; this.setDimensions(); this.actions(); }, setDimensions: function() { var self = this; var slideWidth = self.slides.offsetWidth; // Single slide"s width var wrapperWidth = slideWidth * self.total; self.wrapper.style.width = wrapperWidth + "px"; }, //... };

Effets de fondu Les effets de fondu sont souvent utilisés dans les diaporamas. La diapositive actuelle disparaît et la suivante apparaît. jQuery a les méthodes fadeIn() et fadeOut() qui fonctionnent à la fois avec les propriétés d'opacité et d'affichage, de sorte que l'élément est supprimé de la page une fois l'animation terminée (affichage : aucun).

En JS pur, il est préférable de travailler avec la propriété opacity et d'utiliser la pile de positionnement CSS. Puis dans un premier temps la slide sera visible (opacité : 1), et les autres seront masquées (opacité : 0).

L'ensemble de styles suivant illustre cette méthode :

Slider ( largeur : 100 % ; débordement : caché ; position : relative ; hauteur : 400 px ; ) .slider-wrapper ( largeur : 100 % ; hauteur : 100 % ; position : relative ; ) .slide ( position : absolue ; largeur : 100 % ; hauteur : 100 % ; opacité : 0 ; ) .slider-wrapper > .slide:first-child ( opacité : 1 ; )

En JS pur, vous devez enregistrer la transition CSS de chaque diapositive :

Diapositive (flottant : gauche ; position : absolue ; largeur : 100 % ; hauteur : 100 % ; opacité : 0 ; transition : opacité 500 ms linéaire ; )

Avec jQuery, pour utiliser les méthodes fadeIn() et fadeOut(), vous devez modifier l'opacité et l'affichage :

Diapositive ( float : gauche ; position : absolue ; largeur : 100 % ; hauteur : 100 % ; affichage : aucun ; ) .slider-wrapper > .slide:first-child ( affichage : bloc ; )

En jQuery, le code est le suivant :

(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( wrapper : ".slider-wrapper", précédent : ".slider-previous", suivant : ".slider-next" , diapositives : ".slide", navigation : ".slider-nav", vitesse : 500, accélération : "linéaire" ), options); var slideTo = function(slide, element) ( var $currentSlide = $(options.slides , element).eq(slide); $currentSlide.animate(( opacity: 1 ), options.speed, options.easing). siblings(options.slides). css("opacity", 0); ); //. .. ); ))(jQuery);

Lors de l'animation de l'opacité, vous devez également modifier les valeurs de cette propriété pour les diapositives restantes.

En JavaScript, ce serait :

Slideshow.prototype = ( //... _slideTo: function(slide) ( var currentSlide = this.slides; currentSlide.style.opacity = 1; for(var i = 0; i< this.slides.length; i++) { var slide = this.slides[i]; if(slide !== currentSlide) { slide.style.opacity = 0; } } }, //... };

Éléments multimédia : vidéo Nous pouvons inclure de la vidéo dans un diaporama. Voici un exemple de diaporama vidéo de Vimeo :

Les vidéos sont incluses via iframe. Il s'agit du même bloc en ligne remplaçable que sur la photo. Remplaçable – parce que le contenu provient d’une source externe.

Pour créer un diaporama pleine page, vous devez modifier les styles comme suit :

Html, corps ( marge : 0 ; remplissage : 0 ; hauteur : 100 % ; hauteur min : 100 % ; /* La hauteur doit être la page entière */ ) .slider ( largeur : 100 % ; débordement : caché ; hauteur : 100 %; min-height: 100%; /* Hauteur et largeur au maximum */ position: absolue; /* Positionnement absolu */ ) .slider-wrapper ( width: 100%; height: 100%; /* Hauteur et largeur au maximum full */ position : relative; ) .slide ( float : gauche ; position : absolue ; largeur : 100 % ; hauteur : 100 % ; ) .slide iframe ( affichage : bloc ; /* Élément de bloc */ position : absolue ; /* Positionnement absolu */ largeur : 100 % ; hauteur : 100 % ; /* Pleine hauteur et largeur */ )

Diaporamas automatiques Les diaporamas automatiques utilisent des minuteries. Chaque fois que la fonction timer setInterval() est rappelée, le curseur sera incrémenté de 1 et ainsi la diapositive suivante sera sélectionnée.

Lorsque le curseur atteint le nombre maximum de diapositives, il doit être réinitialisé.

Les diaporamas interminables deviennent vite ennuyeux pour les utilisateurs. La meilleure pratique consiste à arrêter l'animation lorsque l'utilisateur la survole et à la reprendre lorsque le curseur s'éloigne.

(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( diapositives : ".slide", vitesse : 3000, assouplissement : "linéaire" ), options); var timer = null; // Minuterie var index = 0; // Curseur var slideTo = function(slide, element) ( var $currentSlide = $(options.slides, element).eq(slide); $currentSlide.stop(true, true). animer (( opacity: 1 ), options.speed, options.easing). siblings(options.slides). css("opacity", 0); ); var autoSlide = function(element) ( // Initialiser le timer de séquence = setInterval ( function() ( index++; // Augmente le curseur de 1 if(index == $(options.slides, element).length) ( index = 0; // Réinitialise le curseur ) slideTo(index, element); ), options.speed ); // Le même intervalle que dans la méthode.animate() ); var startStop = function(element) ( element.hover(function() ( // Arrête l'animation clearInterval(timer); timer = null; ), function () ( autoSlide(element); // Reprendre l'animation )); ); return this.each(function() ( var $element = $(this); autoSlide($élément); startStop($élément); )); ); ))(jQuery);

Les deux paramètres de la méthode .stop() sont définis sur true, car nous n'avons pas besoin de créer une file d'attente d'animation à partir de notre séquence.

En JS pur, le code devient plus simple. Nous enregistrons une transition CSS pour chaque diapositive d'une certaine durée :

Diapositive ( transition : opacité 3s linéaire ; /* 3 secondes = 3000 millisecondes */ )

Et le code sera comme ceci :

Navigation au clavier Les diaporamas avancés offrent une navigation au clavier, c'est-à-dire Faites défiler les diapositives en appuyant sur les touches. Pour nous, cela signifie simplement que nous devons enregistrer la gestion de l'événement keypress.

Pour ce faire, nous accéderons à la propriété keyCode de l'objet événement. Il renvoie le code de la touche enfoncée (liste des codes).

Les événements que nous avons attachés aux boutons « Précédent » et « Suivant » peuvent désormais être attachés aux touches « gauche » et « droite ». jQuery :

$("body").on("keydown", function(e) ( var code = e.keyCode; if(code == 39) ( // Flèche gauche $next.trigger("click"); ) if( code == 37) ( // Flèche droite $previous.trigger("click"); ) ));

En JS pur, au lieu de la simple méthode .trigger(), vous devrez utiliser dispatchEvent() :

Document.body.addEventListener("keydown", function(e) ( var code = e.keyCode; var evt = new MouseEvent("click"); // clic de souris if(code == 39) ( // Flèche gauche auto .next.dispatchEvent(evt); ) if(code == 37) ( // Flèche droite self.previous.dispatchEvent(evt); ) ), false);

Dans les projets décents, cela n'est pas habituel. Nous aurions besoin de définir la fonctionnalité qui permet le retournement dans une méthode publique, puis de l'appeler lorsque vous cliquez sur le bouton. Ensuite, si une autre partie du programme avait besoin d'implémenter cette fonctionnalité, il ne serait pas nécessaire d'émuler les événements DOM, mais pourrait simplement appeler cette méthode.

Rappels Ce serait bien de pouvoir attacher du code à n'importe quelle action de diaporama qui serait exécutée lorsque cette action est effectuée. C'est le but des fonctions de rappel : elles ne sont exécutées que lorsqu'une certaine action se produit. Disons que notre diaporama comporte des légendes et qu'elles sont masquées par défaut. Au moment de l'animation, nous devons afficher une légende pour la diapositive actuelle ou même en faire quelque chose.

Dans jQuery, vous pouvez créer un rappel comme celui-ci :

(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( //... callback: function() () ), options); var slideTo = function(slide, element) ( var $currentSlide = $(options.slides, element).eq(slide); $currentSlide. animate(( opacity: 1 ), options.speed, options.easing, // Rappel pour la diapositive actuelle options.callback($ currentSlide)). siblings(options.slides). css("opacity", 0); ); //... ); ))(jQuery);

Dans ce cas, le rappel est une fonction de .animate() qui prend la diapositive actuelle comme argument. Voici comment vous pouvez l'utiliser :

$(function() ( $("#main-slider").slideshow(( callback: function(slide) ( var $wrapper = slide.parent(); // Affiche la légende actuelle et masque les autres $wrapper.find (" .slide-caption").hide(); slide.find(".slide-caption").show("lent"); ) )); ));

En JS pur :

(function() ( function Slideshow(element, callback) ( this.callback = callback || function()); // Notre rappel this.el = document.querySelector(element); this.init(); ) Slideshow. prototype = ( init: function() ( //... this.slides = this.el.querySelectorAll(".slide"); //... //... ), _slideTo: function(slide) ( var self = ceci ; var currentSlide = self.slides ; currentSlide.style.opacity = 1 ; for(var i = 0 ; i< self.slides.length; i++) { var slide = self.slides[i]; if(slide !== currentSlide) { slide.style.opacity = 0; } } setTimeout(self.callback(currentSlide), 500); // Вызывает функцию по окончанию перехода } }; // })();

La fonction de rappel est définie comme deuxième paramètre du constructeur. Vous pouvez l'utiliser comme ceci :

Document.addEventListener("DOMContentLoaded", function() ( var slider = new Slideshow("#main-slider", function(slide) ( var wrapper = slide.parentNode; // Affiche la légende actuelle et masque les autres var allSlides = wrapper.querySelectorAll(".slide"); var caption = slide.querySelector(".slide-caption"); caption.classList.add("visible"); for(var i = 0; i< allSlides.length; ++i) { var sld = allSlides[i]; var cpt = sld.querySelector(".slide-caption"); if(sld !== slide) { cpt.classList.remove("visible"); } } }); });

API externes Jusqu'à présent, notre scénario de travail est simple : toutes les diapositives sont déjà dans le document. Si nous devons y insérer des données de l'extérieur (YouTube, Vimeo, Flickr), nous devons remplir les diapositives à la volée au fur et à mesure que nous recevons du contenu externe.

Étant donné que la réponse du serveur tiers peut ne pas être immédiate, vous devez insérer une animation de chargement pour montrer que le processus est en cours :

Précédent Suivant

Il peut s'agir d'un gif ou d'une pure animation CSS :

#spinner ( border-rayon : 50 % ; bordure : 2px solide #000 ; hauteur : 80px ; largeur : 80px ; position : absolue ; haut : 50 % ; gauche : 50 % ; marge : -40px 0 0 -40px ; ) # spinner:after ( contenu : " " ; position : absolue ; couleur d'arrière-plan : #000 ; haut : 2px ; gauche : 48 % ; hauteur : 38px ; largeur : 2px ; rayon-bordure : 5px ; -webkit-transform-origin : 50 % 97 % ; origine de transformation : 50 % 97 % ; -webkit-animation : angulaire 1s linéaire infini ; animation : angulaire 1s linéaire infini ; ) @-webkit-keyframes angulaire ( 0%(-webkit-transform:rotate(0deg );) 100%(-webkit-transform:rotate(360deg);) ) @keyframes angulaire ( 0%(transform:rotate(0deg);) 100%(transform:rotate(360deg);) ) #spinner:avant ( contenu : "" ; position : absolue ; couleur d'arrière-plan : #000 ; haut : 6 px ; gauche : 48 % ; hauteur : 35 px ; largeur : 2 px ; rayon de bordure : 5 px ; -webkit-transform-origin : 50 % 94 % ; transformation-origine : 50 % 94 % ; -webkit-animation : ptangulaire 6s linéaire infini ; animation : ptangulaire 6s linéaire infini ; ) @-webkit-keyframes ptangulaire ( 0%(-webkit-transform:rotate(0deg);) 100 %(-webkit-transform:rotate(360deg);) ) @keyframes ptangulaire ( 0%(transform:rotate(0deg);) 100%(transform:rotate(360deg);) )

Les étapes seront les suivantes :
- demander des données à l'extérieur
- cacher le chargeur de démarrage
- analyser les données
- construire du HTML
- afficher un diaporama
- traiter les diaporamas

Disons que nous sélectionnons les vidéos YouTube les plus récentes d'un utilisateur. jQuery :

(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( wrapper : ".slider-wrapper", //... chargeur : "#spinner", //... limite : 5, nom d'utilisateur : "learncodeacademy" ), options); //... var getVideos = function() ( // Récupérer des vidéos de YouTube var ytURL = "https://gdata.youtube.com/feeds/api/ videos?alt=json&author=" + options.username + "&max-results=" + options.limit; $.getJSON(ytURL, function(videos) ( // Récupère la vidéo en tant qu'objet JSON $(options.loader). hide( ); // Cacher le chargeur var inputs = videos.feed.entry; var html = ""; for(var i = 0; i< entries.length; ++i) { // Разбираем данные и строим строку HTML var entry = entries[i]; var idURL = entry.id.$t; var idVideo = idURL.replace("http://gdata.youtube.com/feeds/api/videos/", ""); var ytEmbedURL = "https://www.youtube.com/embed/" + idVideo + "?rel=0&showinfo=0&controls=0"; html += ""; html += ""; html += ""; } $(options.wrapper).html(html); // Выведем слайд-шоу }); }; return this.each(function() { //... getVideos(); // Обрабатываем слайд-шоу }); }; })(jQuery);

En JavaScript pur, il y a une étape supplémentaire : créer une méthode pour obtenir JSON :

Les procédures sont alors similaires :

(function() ( function Slideshow(element) ( this.el = document.querySelector(element); this.init(); ) Slideshow.prototype = ( init: function() ( this.wrapper = this.el.querySelector( ".slider-wrapper"); this.loader = this.el.querySelector("#spinner"); //... this.limit = 5; this.username = "learncodeacademy"; this.actions(); ) , _getJSON : function(url, callback) ( callback = callback || function(); var request = new XMLHttpRequest(); request.open("GET", url, true); request.send(null); request .onreadystatechange = function() ( if (request.status == 200 && request.readyState == 4) ( var data = JSON.parse(request.responseText); // Rappel d'objet JSON(data); ) else ( console. log( request.status); ) ); ), //... getVideos: function() ( var self = this; // Obtenir une vidéo YouTube var ytURL = "https://gdata.youtube.com/feeds/api /videos ?alt=json&author=" + self.username + "&max-results=" + self.limit; self._getJSON(ytURL, function(videos) ( // Récupère la vidéo en tant qu'objet JSON var inputs = videos.feed.entry ; varhtml = ""; self.loader.style.display = "aucun"; // Cacher le chargeur pour (var i = 0; i< entries.length; ++i) { // Разбираем данные и строим строку HTML var entry = entries[i]; var idURL = entry.id.$t; var idVideo = idURL.replace("http://gdata.youtube.com/feeds/api/videos/", ""); var ytEmbedURL = "https://www.youtube.com/embed/" + idVideo + "?rel=0&showinfo=0&controls=0"; html += ""; html += ""; html += ""; } self.wrapper.innerHTML = html; // Выводим слайд-шоу }); }, actions: function() { var self = this; self.getVideos(); // Обрабатываем слайд-шоу } }; })(); Добавить метки