Let's take a look at the renderings first
In fact, writing a carousel picture is quite simple. I thought of two ways to implement a carousel picture (in fact, there are 5 subdivisions, but two of them are native to the dom, and the three are animations using AngularJs, all classified into two categories). When I write it out, everyone can understand it carefully.
Then I will write one first. The first is to not use angularjs animation module, and only use instructions to complete the animation switching. Here, it is to operate the dom element in the command, which is super easy.
Sample code
<!DOCTYPE html><html lang="en" ng-app="lunbo"><head> <meta charset="UTF-8"> <script src="lib/angular.min.js" type="text/javascript"></script> <script src="lib/angular-animate.js" type="text/javascript"></script> <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 in images" > <a href="{{img.href}}"><img 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({ method:'GET', url:'img.json' }).success(function (data, status, header, config) { deferred.resolve(data); }).error(function (data, status, header, config) { deferred.reject(data); }); return deferred.promise; } } }]); 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; scope.flag=false; promise.then(function (data) { console.log(data); scope.images=data; }); setInterval(function () { element.find("li").css({"display":"none","opacity":0}); step++; step=step%5; element.find("li").eq(step).css({"display":"block","opacity":1}); },1000) } } }]); /*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", "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" }] It is easy to see if the instruction ends up. It is done by calling the jquery function encapsulated by angularjs itself by calling element object in the instruction's link function.
Another one is
link: function (scope, element, attr) { var promise=readJSON.query(); var step=0; scope.flag=false; promise.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) } } If you want to transition effects, you can add css3 transition animation to acive class.
This uses $http and $q to implement a delayed asynchronous data pull. By combining functions in this way, the function function can be more robust and more convenient to monitor functions. I will spend time specifically explaining the contents of angularjs' $q and jquery's $Deferred . In fact, the principles are similar and both implement promise operations.
The difficulty of implementing JavaScript is how to increase and decrease elements so as to trigger the animation effect of AngularJs. I wrote one this time, but there was a small flaw when I started running, that is, the step size of the small button must be added to 1 to synchronize with the photo. I don’t know how it was caused, so I will fill in the pit in the future. If there is any inappropriate point, please point it out.
There is another way to write, which I don't recommend very much. Although it's easy to write, I'll briefly explain the idea, which is to create an array to store src and other information of pictures. Each time, take one out of it, bind it to the src of img in two-way. Now read img, and when it comes to the next one, clear the src of img and assign the next one. With this loop, although carousels can be achieved, this greatly increases the number of http requests. In the case of low network speed, the experience is very bad, and I do not recommend it.
I highly recommend this way of writing. Although I am a little bit verbose, I have a good experience.
<!DOCTYPE html><html lang="en" ng-app="lunbo"><head> <meta charset="UTF-8"> <script src="lib/angular.min.js" type="text/javascript"></script> <script src="lib/angular-animate.js" type="text/javascript"></script> <title></title> <style> *{ padding: 0px; margin: 0px; } div { position: relative; } div ul { position: absolute; } div ul li { list-style-type: none; position: absolute; } div ul li a img { display: block; width: 730px; height: 454px; } div ul.listContent{ position: absolute; left: 500px; top: 410px; width: 200px; height: 25px; } div ul.listContent li.list{ position: relative; display: block; width: 25px; height: 25px; float: left; margin: 0 5px; border: 1px solid blue; text-align: center; line-height: 25px; cursor: pointer; } .active{ background: #161616; color: #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.href}}"><img src="{{img2.src}}"/></a></li> <li ng-switch-when="2"><a href="{{img3.href}}"><img src="{{img3.href}}"/></a></li> <li ng-switch-when="3"><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-click="clickEvent(0)" >1</li> <li ng-click="clickEvent(1)" >2</li> <li ng-click="clickEvent(2)" >3</li> <li 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({ method:'GET', url:'img.json' }).success(function (data, status, header, config) { deferred.resolve(data); }).error(function (data, status, header, config) { deferred.reject(data); }); return deferred.promise; } } }]); /* There is a problem with this service and needs improvement. I didn't think of a solution yet*/ app.factory('mouseEvent', function () { return{ mouseevent: function (ele1,ele2 ,event, done) { } } }); app.directive('lunbo',['readJSON','$timeout','mouseEvent' ,function (readJSON,$timeout,mouseEvent) { return{ restrict:'EA', templateUrl:'lunbo.html', scope:{}, link: function (scope, element, attr) { var promise=readJSON.query(); var step=0; var time=null; promise.then(function (data) { scope.img1=data[0]; scope.img2=data[1]; scope.img3=data[2]; scope.img4=data[3]; scope.img5=data[4]; }); var stepFun= function () { element.find("li").removeClass("active"); element.find("li").eq(step+1).addClass("active"); scope.pic=step; step++; step=step%5; time=$timeout(function () { stepFun(); },5000); }; stepFun(); /*click event*/ scope.clickEvent= function (number) { scope.pic=number; element.find("li").removeClass("active"); element.find("li").eq(number+1).addClass("active"); $timeout.cancel(time); step=number; }; /*Mouse removal animation restart*/ scope.start= function () { $timeout.cancel(time); stepFun(); } } } } } }]); 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); }else{ element.css("opacity",step/100); } }; element.css("opacity",0); time=setInterval(animationFunc,50); }, leave: function (element,done) { var step=100; var time=null; var animationFun= function () { step-=20; if(step<0){ done(); clearInterval(time); }else{ element.css("opacity",step/100) } }; element.css("opacity",1); time=setInterval(animationFun,40); } } })</script></html>Summarize
The above is the entire content of this article. I hope it will be of some help to everyone's study and work. If you have any questions, you can leave a message to communicate.