Erstellen eines Diashow -Plugins mit AngularJS - SitePoint

Dieses Tutorial zeigt, dass ein Diashow -Plugin mit AngularJS erstellt wird und JQuery für eine sauberere, prägnantere Codebasis vermeidet. Wir nutzen Angular -Richtlinien und Animationen, um dies zu erreichen. Die Vertrautheit mit AngularJS -Richtlinien wird angenommen.

Schlüsselvorteile:

• reduziertes Code im Vergleich zu JQuery-basierten Lösungen.
• nahtlose Integration in vorhandene AngularJS -Anwendungen über Richtlinien und Animationen.
• Keine jQuery erforderlich.
• reaktionsschnelles Design, das durch CSS -Medienabfragen erreichbar ist.
• leicht mit Bildunterschriften, Navigation und Schleifen (Karussell-) Effekte anpassen.

Schritt 1: Definieren der AngularJS -Direktive

Wir beginnen zunächst eine isolierte AngularJS -Anweisung mit dem Namen 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>

Das scope ist isoliert, um Konflikte mit Elternbereiche zu verhindern. Das Attribut images empfängt ein Array von Bildobjekten aus dem übergeordneten Bereich. ngAnimate ist für die Animationsunterstützung enthalten.

Schritt 2: Bilddatencontroller

Ein Controller liefert die Bilddaten:

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

Schritt 3: Anweisungsvorlage (templates/templateurl.html)

Die HTML -Vorlage der Direktive verwendet ng-repeat, um Bilder anzuzeigen:

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

Schritt 4: CSS -Animationen

CSS für reibungslose Übergänge hinzufügen (das Timing wie gewünscht einstellen):

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

Schritt 5: Verwenden Sie die Anweisung

In Ihrem Haupt -HTML die Direktive und den Controller einschließen:

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

Denken Sie daran, die erforderlichen CSS zum Styling des Schiebereglers einzubeziehen. Dieses erweiterte Beispiel umfasst die automatische Diashow -Funktionalität und eine verbesserte Fehlerbehandlung. Denken Sie daran, Platzhalterbildpfade durch Ihre tatsächlichen Bild -URLs zu ersetzen. Die alt -attribute werden zur Zugänglichkeit hinzugefügt.

Das obige ist der detaillierte Inhalt vonErstellen eines Diashow -Plugins mit AngularJS - SitePoint. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!