Jetons un coup d'œil aux rendus d'abord
En fait, écrire une image de carrousel est assez simple. J'ai pensé à deux façons de mettre en œuvre une image de carrousel (en fait, il y a 5 subdivisions, mais deux d'entre elles sont originaires du DOM, et les trois sont des animations utilisant AngularJS, toutes classées en deux catégories). Quand je l'écris, tout le monde peut le comprendre attentivement.
Ensuite, j'écrirai un en premier. La première consiste à ne pas utiliser le module d'animation AngularJS et à utiliser uniquement les instructions pour terminer la commutation d'animation. Ici, c'est pour faire fonctionner l'élément DOM dans la commande, ce qui est super facile.
Exemple de code
<! Doctype html> <html lang = "en" ng-app = "Lunbo"> <adre> <meta charset = "utf-8"> <script src = "lib / angular.min.js" type = "text / javascrip <Title> </Title> <style> .Hidden {affichage: aucun; } .active {display: block; } </ style> </ head> <body ng-controller = "lunbocontroller"> <div Lunbo> / div> <script type = "text / ng-template" id = "lunbo.html"> <ul> <li ng-repeat = "img in images"> <a href = "{{img.href}"> src = "{{img.src}}" /> </a> </li> </ script> </ body> <script> var app = angular.module ('lunbo', ['nganimate']); app.Controller ('Lunbocontroller', ['$ scope', 'Readjson', function ($ scope, readjson) {}]); app.factory ('Readjson', ['$ http', '$ q', fonction ($ http, $ q) {return {query: function () {var deferred = $ q.defer (); $ http ({méthode: 'get', url: 'img.json'}). Success (function,, data, status, headry, config) {déferred). Descenoly. }). Erreur (fonction (data, status, en-tête, config) {destrurd.reject (data);}); app.directive ('Lunbo', ['Readjson', fonction (Readjson) {return {restrict: 'ea', templateUrl: 'lunbo.html', scope: {}, link: function (scope, élément, att) {var promest = readjson.query (); var Step = 0; scope.flag = false; Console.log (données); }, 1000)}}}]); /*app.animation('.fade-in ', function () {return {Entrée: function (élément, fait) {}}}) * / </ script> </html> [{"href": "http://www.google.com", "src": "img / 5.jpg", "alt": "5"}, {"href": "http://www.google.com", "src": "img / 6.jpg", "alt": "6"}, {}, {{}, {}, {}: "IMG / 6.jpg", "Alt": "6",}, {}. "href":"http://www.google.com", "src":"img/8.jpg", "alt":"8" }, { "href":"http://www.google.com", "src":"img/8.jpg", "alt":"8" }, { "href": "http://www.google.com", "src": "img / 8.jpg", "alt": "8"}, {"href": "http://www.google.com", "src": "img / 9.jpg", "alt": "9"}] Il est facile de voir si l'instruction se termine. Cela se fait en appelant la fonction jQuery encapsulée par AngularJS lui-même en appelant element dans la fonction de liaison de l'instruction.
Un autre est
lien: function (scope, élément, att) {var promesse = readjson.Query (); var étape = 0; scope.flag = false; promesse.then (function (data) {console.log (data); scope.images = data;}); setInterval (function () {element.find ("li"). reposovelass ("acitve"); étape ++; Step = Step% 5; élément.find ("li"). eq (Step) .AddClass ("active");}, 1000)}} Si vous souhaitez transition des effets, vous pouvez ajouter une animation de transition CSS3 à acive .
Cela utilise $http et $q pour implémenter une traction de données asynchrones retardée. En combinant les fonctions de cette manière, la fonction de fonction peut être plus robuste et plus pratique pour surveiller les fonctions. Je passerai du temps à expliquer spécifiquement le contenu des $Deferred de $q et de JQuery. En fait, les principes sont similaires et mettent tous les deux à mettre en œuvre des opérations promise .
La difficulté de mettre en œuvre JavaScript est de savoir comment augmenter et diminuer les éléments afin de déclencher l'effet d'animation d'AngularJS. J'en ai écrit une cette fois, mais il y avait un petit défaut quand j'ai commencé à courir, c'est-à-dire que la taille du pas du petit bouton doit être ajoutée à 1 pour se synchroniser avec la photo. Je ne sais pas comment cela a été causé, donc je vais remplir la fosse à l'avenir. S'il y a un point inapproprié, veuillez le signaler.
Il existe une autre façon d'écrire, ce que je ne recommande pas beaucoup. Bien qu'il soit facile à écrire, je vais expliquer brièvement l'idée, qui est de créer un tableau pour stocker SRC et d'autres informations d'images. À chaque fois, en retirez-en un, liez-le au SRC d'IMG à double sens. Lisez maintenant IMG, et en ce qui concerne le suivant, effacez le SRC d'IMG et attribuez le suivant. Avec cette boucle, bien que les carrousels puissent être obtenus, cela augmente considérablement le nombre de demandes HTTP. Dans le cas d'une faible vitesse de réseau, l'expérience est très mauvaise et je ne le recommande pas.
Je recommande fortement cette façon d'écrire. Bien que je sois un peu verbeux, j'ai une bonne expérience.
<! Doctype html> <html lang = "en" ng-app = "Lunbo"> <adre> <meta charset = "utf-8"> <script src = "lib / angular.min.js" type = "text / javascrip <Title> </ Title> <ystyle> * {padding: 0px; marge: 0px; } div {position: relative; } div ul {position: absolue; } div ul li {list-style-type: aucun; Position: absolue; } div ul li a img {display: block; Largeur: 730px; hauteur: 454px; } div ul.listContent {position: absolue; Gauche: 500px; En haut: 410px; Largeur: 200px; hauteur: 25px; } div ul.listContent li.list {position: relative; Affichage: bloc; Largeur: 25px; hauteur: 25px; flottant: à gauche; marge: 0 5px; Border: 1px bleu massif; Texte-aligne: Centre; hauteur de ligne: 25px; curseur: pointeur; } .active {Background: # 161616; Couleur: #ffffff; } </ style> </ head> <body ng-controller = "Lunbocontroller"> <div Lunbo> </div> <script type = "text / ng-template" id = "Lunbo.html"> <div ng-mouseleave = "start ()"> <ul ng-switch = "pic"> <li ng-switch-WHEN = "0"> <a href = "{{img1.href}}"> <img src = "{{img1.src}}" /> </a> </li> <li ng-switch-when = "1"> <a href = "{{iMg2 src = "{{img2.src}}" /> </a> </li> <li ng-switch-wHen = "2"> <a href = "{{img3.href}}"> <img src = "{{img3.href}}" /> </a> </li> <li ng-switch-wHen = "> </a> </li> <li ng-switch-wHen ="> </a> </li> <li ng-switch-wHen = "> </a> </li> <li ng-switch-wHen ="> </a> </li> <li ng-switch-wHen = "> </a> </ li> href = "{{img4.href}}"> <img src = "{{img4.src}}" /> </a> </li> <li ng-switch-when = "4"> <a href = "{{img5.href}}"> <imgg = " src = "{{img5.src}}" /> </a> </li> </ul> <ul> <li ng-Click = "Clickevent (0)"> 1 </li> <li ng-Click = "Clickevent (1)"> 2 </li> <li ng-Click = "Clickevent (2)"> 3 </ li> ng-Click = "ClicKevent (3)"> 4 </li> <li ng-Click = "Clickevent (4)"> 5 </li> </ul> </div> </cript> </body> <cript> var app = angular.module ('Lunbo', ['nganimate']); app.Controller ('Lunbocontroller', ['$ scope', 'Readjson', 'MouseEvent', fonction ($ scope, Readjson, MouseEvent) {}]); app.factory ('Readjson', ['$ http', '$ q', fonction ($ http, $ q) {return {query: function () {var deferred = $ q.defer (); $ http ({méthode: 'get', url: 'img.json'}). Success (function,, data, status, headry, config) {déferred). Descenoly. }). Erreur (fonction (data, status, en-tête, config) {destrurd.reject (data);}); / * Il y a un problème avec ce service et nécessite une amélioration. Je ne pensais pas encore à une solution * / app.factory ('MouseEvent', function () {return {MouseEvent: function (ele1, ele2, événement, fait) {}}}); app.directive ('Lunbo', ['Readjson', '$ timeout', 'Mouseevent', fonction (Readjson, $ timeout, mousevent) {return {restrict: 'ea', templateUrl: 'Lunbo.html', scope: {}, lien: function (scope, élément, att) {var promesse = readjson.Query. Time = null; promesse.then (fonction (data) {scope.img1 = données [0]; scope.img2 = données [1]; scope.img3 = données [2];}); Element.Find (LI "). EQ (étape + 1). Element.Find (LI "). }]); app.animation ('. fade-in', function () {return {Enter: function (element, Done) {var Step = 0; var time = null; // timer var animationfunc = function () {Step + = 20; if (Step> 100) {Done (); clearInterval (time);} élément.css (opacité ", 0); element.css ("opacité", 1);Résumer
Ce qui précède est l'intégralité du contenu de cet article. J'espère que cela sera d'une aide à l'étude et au travail de chacun. Si vous avez des questions, vous pouvez laisser un message pour communiquer.