Création d'un plugin de diaporama avec angularjs - SitePoint

Ce tutoriel montre la construction d'un plugin de diaporama à l'aide d'AngularJS, évitant jQuery pour une base de code plus propre et plus concise. Nous tirons parti des directives angulaires et des animations pour y parvenir. La familiarité avec les directives angularjs est supposée.

Avantages clés:

• Code réduit par rapport aux solutions basées sur jQuery.
• Intégration transparente dans les applications AngularJS existantes via des directives et des animations.
• pas de jQuery requise.
• Conception réactive réalisable par le biais de requêtes médiatiques CSS.
• facilement personnalisable avec les légendes, la navigation et les effets de boucle (carrousel).

Étape 1: Définition de la directive AngularJS

Nous commençons par créer une directive AngularJS isolé nommée slider:

<code class="language-javascript">var sliderApp = angular.module('sliderApp', ['ngAnimate']); // Note: ngAnimate included

sliderApp.directive('slider', function($timeout) {
  return {
    restrict: 'AE',
    replace: true,
    scope: {
      images: '='
    },
    link: function(scope, elem, attrs) {
      scope.currentIndex = 0;

      scope.next = function() {
        scope.currentIndex = (scope.currentIndex + 1) % scope.images.length;
      };

      scope.prev = function() {
        scope.currentIndex = (scope.currentIndex - 1 + scope.images.length) % scope.images.length;
      };

      scope.$watch('currentIndex', function() {
        scope.images.forEach(function(image) {
          image.visible = false;
        });
        scope.images[scope.currentIndex].visible = true;
      });

      var timer;
      var sliderFunc = function() {
        timer = $timeout(function() {
          scope.next();
          timer = $timeout(sliderFunc, 5000); // Adjust interval as needed
        }, 5000);
      };

      sliderFunc();

      scope.$on('$destroy', function() {
        $timeout.cancel(timer);
      });
    },
    templateUrl: 'templates/templateurl.html'
  };
});</code>

Le scope est isolé pour éviter les conflits avec les lunettes de parent. L'attribut images reçoit un tableau d'objets d'image de la portée parent. ngAnimate est inclus pour le support d'animation.

Étape 2: Contrôleur de données d'image

Un contrôleur fournit les données d'image:

<code class="language-javascript">sliderApp.controller('SliderController', function($scope) {
  $scope.images = [
    { src: 'img1.png', title: 'Pic 1' },
    { src: 'img2.jpg', title: 'Pic 2' },
    { src: 'img3.jpg', title: 'Pic 3' },
    { src: 'img4.png', title: 'Pic 4' },
    { src: 'img5.png', title: 'Pic 5' }
  ];
});</code>

Étape 3: modèle directif (templates/templateurl.html)

Le modèle HTML de la directive utilise ng-repeat pour afficher les images:

<code class="language-html"><div class="slider">
  <div class="slide" ng-repeat="image in images" ng-show="image.visible">
    <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/" class="lazy" alt="Creating a Slide Show Plugin With AngularJS - SitePoint">
    <p>{{image.title}}</p> </div>
  <div class="arrows">
    <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" ng-click="prev()"><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174018895287877.png" class="lazy" alt="Creating a Slide Show Plugin With AngularJS - SitePoint"></a>
    <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" ng-click="next()"><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174018895383537.png" class="lazy" alt="Creating a Slide Show Plugin With AngularJS - SitePoint"></a>
  </div>
</div></code>

Étape 4: Animations CSS

Ajouter CSS pour les transitions lisses (ajuster le timing comme souhaité):

<code class="language-css">.slide.ng-hide-add, .slide.ng-hide-remove {
  transition: opacity 0.5s linear;
}
.slide.ng-hide-add.ng-hide-add-active, .slide.ng-hide-remove {
  opacity: 0;
}
.slide.ng-hide-add, .slide.ng-hide-remove.ng-hide-remove-active {
  opacity: 1;
}</code>

Étape 5: Utilisation de la directive

Dans votre HTML principal, incluez la directive et le contrôleur:

<code class="language-html"><div ng-controller="SliderController">
  <slider images="images"></slider>
</div></code>

N'oubliez pas d'inclure le CSS nécessaire pour styliser le curseur. Cet exemple amélioré comprend une fonctionnalité de diaporama automatique et une amélioration des erreurs. N'oubliez pas de remplacer les chemins d'image d'image d'espace réservé par vos URL d'image réelles. Les attributs alt sont ajoutés pour l'accessibilité.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!