Давайте сначала посмотрим на визуализации
На самом деле, написание картины карусели довольно просто. Я думал о двух способах реализации картины каруселей (на самом деле, есть 5 подразделений, но два из них являются родными для DOM, а три - анимации, использующие AngularJ, все классифицированы на две категории). Когда я пишу это, каждый может понять это тщательно.
Тогда я напишу первым. Во -первых, не использовать модуль анимации AngularJS и использовать только инструкции для завершения переключения анимации. Здесь он должен управлять элементом DOM в команде, что очень легко.
Пример кода
<! Doctype html> <html lang = "en" ng-app = "lunbo"> <head> <meta charset = "utf-8"> <script src = "lib/angular.min.js" type = "text/javascript"> javipt javipt javascr <title> </title> <style> .hidden {Display: None; } .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 в изображениях"> <a 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', function ($ http, $ q) {return {query: function () {var deferred = $ q.defer (); $ http ({метод: 'get', url: 'img.json'}). }). Ошибка (Data, Status, Header, Config) {deferred.reject (data);}); app.directive ('lunbo', ['readjson', function (readjson) {return {restrict: 'ea', templateurl: 'lunbo.html', scope: {}, link: function (scope, element, attr) {var promise = readjson.query (); var step = 0; floy.flag = false. scope.images = data; }]); /* app.animation('.fade-in ', function () {return {enter: function (element, dode) {}}})*/</script> </html> [{"href": "http://www.google.com", "src": "img/5.jpg", "alt": "5"}, {"href": "http://www.google.com", "src": "img/6. «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"}] Легко увидеть, заканчивается ли инструкция. Это делается путем вызова функции jQuery, инкапсулированной самим AngularJS, вызывая объект element в функции ссылки инструкции.
Другой есть
Ссылка: функция (Scope, element, attr) {var promise = readjson.query (); var step = 0; scope.flag = false; Special.Then (function (data) {console.log (data); scope.images = data;}); setInterval (function () {element.find ("li"). removeClass ("acitve"); step ++; step = step%5; element.find ("li"). EQ (step) .AdDClass ("Active");}, 1000)}}}}}}}}}}}}}} Если вы хотите переходить эффекты, вы можете добавить анимацию перехода CSS3 в acive класс.
Это использует $http и $q для реализации задержки асинхронного притяжения данных. Объединяя функции таким образом, функция функции может быть более надежной и более удобной для мониторинга функций. Я потрачу время на объяснение содержимого Angularjs ' $q и JQUERY $Deferred . На самом деле, принципы схожи, и оба реализуют операции promise .
Сложность реализации JavaScript заключается в том, как увеличить и уменьшить элементы, чтобы вызвать анимационный эффект AngularJ. Я написал один на этот раз, но когда я начал работать, был небольшой недостаток, то есть размер шага маленькой кнопки должен быть добавлен в 1 для синхронизации с фотографией. Я не знаю, как это было вызвано, поэтому я заполню яму в будущем. Если есть какой -либо неуместный пункт, пожалуйста, укажите его.
Есть еще один способ написать, что я не очень рекомендую. Хотя это легко написать, я кратко объясню эту идею, которая состоит в том, чтобы создать массив для хранения SRC и другой информации о картинках. Каждый раз, вынимайте из него один, связывайте его с SRC IMG в двусторонней части. Теперь прочитайте IMG, и когда дело доходит до следующего, очистите SRC IMG и назначьте следующий. С помощью этой петли, хотя карусели могут быть достигнуты, это значительно увеличивает количество HTTP -запросов. В случае низкой скорости сети опыт очень плохой, и я не рекомендую его.
Я очень рекомендую этот способ написания. Хотя я немного словес, у меня есть хороший опыт.
<! Doctype html> <html lang = "en" ng-app = "lunbo"> <head> <meta charset = "utf-8"> <script src = "lib/angular.min.js" type = "text/javascript"> javipt javipt javascr <title> </title> <style> *{padding: 0px; поля: 0px; } div {позиция: относительно; } div ul {position: Absolute; } div ul li {list-style-type: none; позиция: абсолютно; } div ul li a img {display: block; Ширина: 730px; Высота: 454px; } div ul.listcontent {position: Absolute; Слева: 500px; Верх: 410px; Ширина: 200px; Высота: 25px; } div ul.listcontent li.list {позиция: относительно; дисплей: блок; Ширина: 25px; Высота: 25px; Плавание: осталось; Полевая: 0 5px; Граница: 1px твердый синий; Текст-альбом: Центр; высота линии: 25px; курсор: указатель; } .Active {founale: #161616; Цвет: #ffffff; } </style> </head> <body ng-controller = "lunbocontroller"> <div lunbo> </div> <script type = "text/ng-template" id = "lunbo.html"> <div ng-mouselave = "start ()"> <ul ng-switch = "pic"> <li ng-switch = "0"> <ul ng-switch = "> <li ng-switch =". 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> </li> <lit> <li> <li> <li> <li> 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-click = "clickevent (0)"> 1 </li> <li ng-click = "clickevent (1)"> 2 </li> <li ng-click = "clickevent (2)"> 3 <li> <li> <li> <li ng-click = " ng-click = "clickevent (3)"> 4 </li> <li ng-click = "clickevent (4)"> 5 </li> </ul> </div> </script> </body> <script> var app = angular.module ('lunbo', ['nganimate']); 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 (); $ http ({метод: 'get', url: 'img.json'}). }). Ошибка (Data, Status, Header, Config) {deferred.reject (data);}); /* Существует проблема с этой услугой и нуждается в улучшении. Я еще не думал о решении*/ app.factory ('mouseevent', function () {return {mouseevent: function (ele1, ele2, event, dode) {}}}); app.directive ('lunbo', ['readjson', '$ timeout', 'mouseevent', function (readjson, $ timeout, mouseevent) {return {restrict: 'ea', templateurl: 'lunbo.html', scope: {}, link: function (scope, element, attry); Ording.Then (function (data) {scope.img1 = data [0]; scope.img2 = data [1]; scope.img3 = data [2]; element.find ("li"). element.find ("li"). }]); app.animation ('. Fade-in', function () {return {enter: function (element, dod) {var step = 0; var time = null; // timer var animationfunc = function () {step+= 20; if (step> 100) {dond (); clearInterval (time);} else {element.csssssssssssssssssssssssssssssssssssss (opacity ", step/100); element.css (opacity », 0); element.css ("непрозрачность", 1);Суммировать
Вышеуказанное - все содержание этой статьи. Я надеюсь, что это поможет всем, кто учится и работа. Если у вас есть какие -либо вопросы, вы можете оставить сообщение для общения.