Schauen wir uns zuerst die Renderings an
Tatsächlich ist das Schreiben eines Karussellbildes recht einfach. Ich dachte an zwei Möglichkeiten, ein Karussellbild zu implementieren (tatsächlich gibt es 5 Unterteilungen, aber zwei von ihnen sind im DOM heimisch und die drei sind Animationen mit AngularJs, die alle in zwei Kategorien eingeteilt sind). Wenn ich es ausschreibe, kann jeder es sorgfältig verstehen.
Dann werde ich zuerst einen schreiben. Das erste besteht darin, das Animationsmodul des AngularJS nicht zu verwenden und nur Anweisungen zu verwenden, um den Animationsschalter zu vervollständigen. Hier soll das DOM -Element im Befehl bedienen, was super einfach ist.
Beispielcode
<! DocType html> <html lang = "en" ng-App = "lunbo"> <head> <meta charset = "utf-8"> <script src = "lib/angular.min <title> </title> <style> .hidden {display: none; } .Active {display: block; · src = "{{img.src}}"/> </a> </li> </script> </body> <script> var app = angular.module ('lunbo', ['nganimate']); App.Controller ('Lunbocontroller', ['$ scope', 'Readjson', Funktion ($ scope, readjson) {}]); App.Factory ('Readjson', ['$ http', '$ q', function ($ http, $ q) {return {query: function () {var deferred = $ q.Defer (); aufgeschoben.Resolve (Daten); app.directive ('lunbo', ['readjson', function (readjson) {return {prestrict: 'ea', templateurl: 'lunbo.html', scope: {}, link: function (scope, element, attr) {var var varly = readjson.query (); console.log (data); }, 1000)}}}]); /* App.Animation('.fade-in ', function () {return {Enter: Funktion (Element, Done) {}}})*/</script> </html> [ { "href":"http://www.google.com", "src":"img/5.jpg", "alt":"5" }, { "href":"http://www.google.com", "src":"img/6.jpg", "alt":"6" }, { "href": "http://www.google.com", "src": "img/8.jpg", "Alt": "8"}, {"href": "http://www.google.com "href": "http://www.google.com", "src": "img/8.jpg", "Alt": "8"}, {"href": "http://www.google.com", "Src": "IMG/9.JPG", "Alt": "9": " Es ist leicht zu erkennen, ob die Anweisung endet. Dies erfolgt durch Aufrufen der von AngularJS selbst eingekapselten JQuery -Funktion, indem element in der Linkfunktion des Befehls aufgerufen wird.
Ein anderer ist
Link: Funktion (Umfang, Element, attr) {var dreadjson.Query (); var Schritt = 0; Scope.flag = false; Promise.then (Funktion (Daten) {console.log (Daten); Scope.images = data;}); setInterval (function () {element.find ("li"). removeclass ("acitve"); Schritt ++; Schritt = Schritt%5; element.find ("li"). Gl. Wenn Sie Übergangseffekte übergehen möchten, können Sie acive Klasse CSS3 -Übergangsanimation hinzufügen.
Dies verwendet $http und $q um einen verzögerten asynchronen Datenzug zu implementieren. Durch die Kombination von Funktionen auf diese Weise kann die Funktionsfunktion robuster und bequemer sein, um Funktionen zu überwachen. Ich werde Zeit damit verbringen, den Inhalt von AngularJS ' $q und JQuery's $Deferred zu erklären. Tatsächlich sind die Prinzipien ähnlich und beide implementieren promise .
Die Schwierigkeit bei der Implementierung von JavaScript besteht darin, die Elemente zu erhöhen und zu verringern, um den Animationseffekt von AngularJs auszulösen. Ich habe diesmal eine geschrieben, aber es gab einen kleinen Fehler, als ich anfing zu laufen, dh die Schrittgröße des kleinen Tastens muss zu 1 hinzugefügt werden, um mit dem Foto zu synchronisieren. Ich weiß nicht, wie es verursacht wurde, also werde ich in Zukunft die Grube ausfüllen. Wenn es einen unangemessenen Punkt gibt, weisen Sie bitte darauf hin.
Es gibt eine andere Möglichkeit zu schreiben, die ich nicht viel empfehle. Obwohl es einfach zu schreiben ist, werde ich die Idee kurz erklären, die darin besteht, ein Array zum Speichern von SRC und anderen Informationen von Bildern zu erstellen. Nehmen Sie jedes Mal eine davon heraus, binden Sie es in zweiwegsem IMG an die SRC von IMG. Lesen Sie nun IMG, und wenn es um den nächsten geht, löschen Sie den SRC von IMG und weisen Sie den nächsten zu. Bei dieser Schleife, obwohl Karusselle erreicht werden können, erhöht dies die Anzahl der HTTP -Anforderungen erheblich. Im Falle einer geringen Netzwerkgeschwindigkeit ist die Erfahrung sehr schlecht, und ich empfehle sie nicht.
Ich kann diese Art des Schreibens nur empfehlen. Obwohl ich ein bisschen ausführlich bin, habe ich eine gute Erfahrung.
<! DocType html> <html lang = "en" ng-App = "lunbo"> <head> <meta charset = "utf-8"> <script src = "lib/angular.min <title> </title> <style> *{padding: 0px; Rand: 0px; } div {Position: relativ; } div ul {Position: absolut; } div ul li {Listenstil-Typ: Keine; Position: absolut; } div ul li a img {display: block; Breite: 730px; Höhe: 454px; } div ul.listContent {Position: absolut; links: 500px; Oben: 410px; Breite: 200px; Höhe: 25px; } div ul.listContent li.list {Position: relativ; Anzeige: Block; Breite: 25px; Höhe: 25px; float: links; Rand: 0 5px; Grenze: 1px fest blau; Text-Align: Mitte; Zeilenhöhe: 25px; Cursor: Zeiger; } .Active {Hintergrund: #161616; Farbe: #ffffff; } </style> </head> <body ng-controller = "lunbocontroller"> <divbo> </div> <script type = "text/ng-template" id = "lunbo.html"> <div ng-Mouseleave = "start ()"> <ulby href="{{img1.href}}"><img src="{{img1.src}}"/></a></li> <li ng-switch-when="1"><a href="{{img2.href}}"><img src = "{{img2.src}}"/> </a> </li> <li ng-switch-when = "2"> <a href = "{{img3.Href}"> <img Src = "{{{img3.Href}"/> </a> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> href="{{img4.href}}"><img src="{{img4.src}}"/></a></li> <li ng-switch-when="4"><a href="{{img5.href}}"><img src = "{{img5.src}}"/> </a> </li> </ul> <ul> <li ng-klick = "clickKevent (0)"> 1 </li> <li ng-klick = "clickevent (1)"> 2 </li> <li ng-click = "clizevent (2)" ng-klick = "clickKevent (3)"> 4 </li> <li ng-klick = "clickKevent (4)"> 5 </li> </ul> </div> </script> </body> <script> var app = angular.module ('lunbo', ['nganimime']); app.controller ('lunbocontroller', ['$ scope', 'readjson', 'mouseEvent', function ($ scope, readjson, mouseEvent) {}]); App.Factory ('Readjson', ['$ http', '$ q', function ($ http, $ q) {return {query: function () {var deferred = $ q.Defer (); aufgeschoben.Resolve (Daten); /* Es gibt ein Problem mit diesem Service und muss verbessert werden. Ich habe noch keine Lösung gedacht*/ app.Factory ('MouseEvent', function () {return {MouseEvent: function (ele1, ele2, Ereignis, fertig) {}}}); app.directive ('lunbo', ['readjson', '$ timeout', 'mouseEvent', function (readjson, $ timeout, mousevent) {return {begrenzt: 'ea', templateurl: 'lunbo.html', scope: {}, link: function (scope, element) {var var) {var varly time = null; Element.Find ("li"). EQ (Schritt+1). Element. "li"). }]); app.Animation ('. fade-in', function () {return {Enter: function (element, done) {var step = 0; var time = null; // Timer var AnimationFunc = function () {Schritt+= 20; if (Schritt> 100) {Done (); Element.CSS ("Opazität", 0); Element.css ("Opazität", 1);Zusammenfassen
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Studium und die Arbeit aller Hilfe helfen. Wenn Sie Fragen haben, können Sie eine Nachricht zur Kommunikation überlassen.