Membuat plugin pertunjukan slaid dengan AngularJS - SitePoint

Tutorial ini menunjukkan membina plugin tayangan slaid menggunakan AngularJS, menghindari jQuery untuk codebase yang lebih bersih, lebih ringkas. Kami memanfaatkan arahan dan animasi sudut untuk mencapai matlamat ini. Kebiasaan dengan arahan AngularJS diandaikan.

Kelebihan utama:

dikurangkan kod berbanding dengan penyelesaian berasaskan jQuery.
integrasi lancar ke dalam aplikasi AngularJS yang sedia ada melalui arahan dan animasi.
tidak diperlukan jQuery.
Reka bentuk responsif boleh dicapai melalui pertanyaan media CSS.
mudah disesuaikan dengan kapsyen, navigasi, dan kesan gelung (karusel).

Langkah 1: Menentukan Arahan AngularJS

kita mulakan dengan membuat arahan AngularJS terpencil bernama

: slider

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'
  };
});

diasingkan untuk mengelakkan konflik dengan skop induk. Atribut scope menerima pelbagai objek imej dari skop induk. images disertakan untuk sokongan animasi. ngAnimate

Langkah 2: Pengawal Data Imej

Pengawal menyediakan data imej:

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' }
  ];
});

Langkah 3: Templat Arahan () templates/templateurl.html Templat HTML Arahan menggunakan

untuk memaparkan imej:

ng-repeat

<div class="slider">
  <div class="slide" ng-repeat="image in images" ng-show="image.visible">
    <img src="/static/imghw/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/imghw/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/imghw/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>

Langkah 4: Animasi CSS

Tambah CSS untuk peralihan yang lancar (laraskan masa seperti yang dikehendaki):

.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;
}

Langkah 5: Menggunakan Arahan

Di HTML utama anda, sertakan arahan dan pengawal:

ingat untuk memasukkan CSS yang diperlukan untuk menggayakan gelangsar. Contoh yang dipertingkatkan ini termasuk fungsi tayangan slaid automatik dan pengendalian ralat yang lebih baik. Ingatlah untuk menggantikan laluan imej letak dengan URL imej sebenar anda. Atribut

<div ng-controller="SliderController">
  <slider images="images"></slider>
</div>

ditambah untuk kebolehcapaian.

Atas ialah kandungan terperinci Membuat plugin pertunjukan slaid dengan AngularJS - SitePoint. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!