Vamos dar uma olhada nas renderizações primeiro
De fato, escrever uma imagem de carrossel é bastante simples. Pensei em duas maneiras de implementar uma imagem de carrossel (na verdade, existem 5 subdivisões, mas duas delas são nativas do DOM, e as três são animações usando o AngularJs, todas classificadas em duas categorias). Quando escrevo, todos podem entender isso com cuidado.
Então eu vou escrever um primeiro. O primeiro é não usar o módulo AngularJS Animation e usar apenas instruções para concluir a comutação de animação. Aqui, é operar o elemento DOM no comando, o que é super fácil.
Código de amostra
<! Doctype html> <html lang = "en" ng-app = "lunbo"> <head> <meta charset = "utf-8"> <script src = "lib/angular.min.js" type = "text/javascript"> </script> <cript src = "liB) type = "text/javaScript"> </sCript> <title> </title> <style> .hidden {display: Nenhum; } .Active {Display: Block; } </style> </ad Head> <corpo ng-controller = "lunbocontroller"> <div lunbo>/div> <script type = "text/ng-template" id = "lunbo.html"> <ul> <li ng-repeat = "imagens"> <a href = ". src = "{{img.src}}"/> </a> </li> </script> </body> <cript> var app = angular.module ('lunbo', ['nganimate']); App.Controller ('LunBocontroller', ['$ scope', 'readjson', function ($ scope, readjson) {}]); App.Factory ('readjson', ['$ http', '$ q', função ($ http, $ q) {return {query: function () {var adiferred = $ q.defer (); $ http ({método: 'get', url: 'img.json'}). diferido.Resolve (Data); App.directive ('lunbo', ['readjson', function (readjson) {return {restrito: 'ea', templateurl: 'lunbo.html', scope: {}, link: function (scope, elemento, attr) {var prometo = readjson.Queryen; scope.images = dados; }]); /*App.animation('.fade-in ', function () {return {enter: function (element, done) {}}})*/</script> </html> [{"href": "http://www.google.com", "src": "img/5.jpg", "alt": "5"}, {"href": "http://www.google.com" "src": "iMg/6.jpg" ":" ":" IMG/66 "href": "http://www.google.com", "src": "img/8.jpg", "alt": "8"}, {"href": "http://www.google.com", "src": "img/8.jpg" "alt "href":"http://www.google.com", "src":"img/8.jpg", "alt":"8" }, { "href":"http://www.google.com", "src":"img/9.jpg", "alt":"9" }] É fácil ver se a instrução acaba. Isso é feito chamando a função jQuery encapsulada pelo próprio AngularJS chamando element na função de link da instrução.
Outro é
link: function (escopo, elemento, att) {var promey = readjson.query (); var stage = 0; scope.flag = false; promete.then (function (dados) {console.log (data); scope.images = dados;}); setInterval (function () {element.find ("li"). removeclass ("acitve"); etapa ++; step = step%5; element.find ("li"). Eq (etapa) .addclass ("ativo");}, 1000)}}}}}}}}}}}} Se você deseja transição de efeitos, pode adicionar animação de transição CSS3 à classe acive .
Isso usa $http e $q para implementar uma tração de dados assíncronos atrasados. Ao combinar funções dessa maneira, a função da função pode ser mais robusta e mais conveniente para monitorar as funções. Passarei um tempo explicando especificamente o conteúdo dos $q e $Deferred de JQuery. De fato, os princípios são semelhantes e ambos implementam operações promise .
A dificuldade de implementar o JavaScript é como aumentar e diminuir os elementos, a fim de desencadear o efeito de animação dos angulares. Desta vez, escrevi um, mas houve uma pequena falha quando comecei a correr, ou seja, o tamanho da etapa do botão pequeno deve ser adicionado a 1 para sincronizar com a foto. Não sei como foi causado, então preencherei o poço no futuro. Se houver algum ponto inadequado, aponte.
Há outra maneira de escrever, que eu não recomendo muito. Embora seja fácil de escrever, explicarei brevemente a idéia, que é criar uma matriz para armazenar SRC e outras informações de fotos. Cada vez, retire um, vincule-o ao SRC do IMG em duas vias. Agora leia o IMG e, quando se trata do próximo, limpe o SRC do IMG e atribua o próximo. Com esse loop, embora os carrosséis possam ser alcançados, isso aumenta muito o número de solicitações HTTP. No caso de baixa velocidade da rede, a experiência é muito ruim e eu não recomendo.
Eu recomendo essa maneira de escrever. Embora eu esteja um pouco detalhado, tenho uma boa experiência.
<! Doctype html> <html lang = "en" ng-app = "lunbo"> <head> <meta charset = "utf-8"> <script src = "lib/angular.min.js" type = "text/javascript"> </script> <cript src = "liB) type = "text/javascript"> </script> <title> </title> <yoy> *{preenchimento: 0px; margem: 0px; } div {Position: relativo; } div ul {posição: absoluto; } div ul li {tipo de lista de lista: nenhum; Posição: Absoluto; } div ul li a img {display: block; Largura: 730px; Altura: 454px; } div ul.ListContent {Posição: Absolute; Esquerda: 500px; TOP: 410px; Largura: 200px; Altura: 25px; } div ul.ListContent li.list {Position: relativo; exibição: bloco; Largura: 25px; Altura: 25px; flutuar: esquerda; margem: 0 5px; borda: 1px azul sólido; Alinhamento de texto: centro; altura de linha: 25px; Cursor: Ponteiro; } .Active {Background: #161616; Cor: #ffffff; } </style> </ad Head> <corpo ng-controller = "lunbocontroller"> <div lunbo> </div> <script type = "text/ng-template" id = "lunbo.html"> <div ng-mouseleave = "start"> <lg ng-switch ">"> <li- li ng-ng mouseleave = "start"> <lg-switch = ""> " href = "{{img1.href}}"> <img src = "{{) src = "{{img2.src}}"/> </a> </li> <li ng-switch-when = "2"> <a href = "{{img3.href}}"> <img src = "{{img3.href}}"> href = "{{img4.href}}"> <img src = "{{img4.src}}"/> </a> </li> <li ng-switch-when = "4"> <a href = "{{img5.href}"> src = "{{img5.src}}"/> </a> </li></ul> <ul> <li ng-click = "clickevent (0)"> 1 </li> <li ng-click = "clickevent (1)"> 2 </li> <li> <llick = "Clickevent (2)" ng-click = "clickevent (3)"> 4 </li> <li ng-click = "clickevent (4)"> 5 </li> </ul> </div> </cript> </body> <cript> var app = angular.module ('Lunbo', ['nganmate']); App.Controller ('Lunbocontroller', ['$ Scope', 'Readjson', 'Mouseevent', função ($ SCOPE, Readjson, Mouseevent) {}]); App.Factory ('readjson', ['$ http', '$ q', função ($ http, $ q) {return {query: function () {var adiferred = $ q.defer (); $ http ({método: 'get', url: 'img.json'}). diferido.Resolve (Data); /* Há um problema com este serviço e precisa de melhorias. Ainda não pensei em uma solução*/ app.factory ('mouseevent', function () {return {mouseevent: function (ele1, ele2, evento, feito) {}}}); App.directive ('lunbo', ['readjson', '$ timeout', 'mouseevent', function (readjson, $ timeout, mouseevent) {return {restrit: 'ea', templateurl: 'lunbo.html', scope: {}, link: função (escopo (elemento, attr) {vars) {var prometo; promete.then (function (dados) {scope.img1 = dados [0]; scope.img2 = dados [1]; scope.img3 = dados [2]; scope.img4 = dados [3]; scope.img5 = dados [4];}); Element.find ("Li"). elemento ("Li"). }]); App.animation ('. elemento.css (opacidade ", 0); elemento.css ("opacidade", 1);Resumir
O acima é o conteúdo inteiro deste artigo. Espero que seja de ajuda para estudar e trabalhar de todos. Se você tiver alguma dúvida, pode deixar uma mensagem para se comunicar.