先来看看效果图
其实写一个轮播图还是蛮简单的，我想了两种种方法，来实现轮播图（实际上细分是5种，但是其中两种是操作dom原生，三种是利用AngularJs的动画，所有归为两大类），等我写出来，大家好好理解一下就好。
那我先写一种，第一种是不使用angularjs的动画模块，只使用指令来完成动画的切换。在这里面就是在指令里操作dom元素，超级easy。
示例代码
<!DOCTYPE html> <html lang="en" ng-app="lunbo"> <head> <meta charset="UTF-8"> <script src="https://www.jb51.net/lib/angular.min.js" type="text/javascript"></script> <script src="https://www.jb51.net/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"> <ul> <li ng-repeat="img in images" > <a href="https://www.jb51.net/{{img.href}}"><img src="https://www.jb51.net/{{img.src}}" alt=""/></a></li> </ul> </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/7.jpg", "alt":"7" }, { "href":"http://www.google.com", "src":"img/8.jpg", "alt":"8" }, { "href":"http://www.google.com", "src":"img/9.jpg", "alt":"9" } ]
看指令的最后是不是很简单啊，就是通过指令的link函数中的element对象调用angularjs自身封装的jquery函数来完成的。
另外一种是
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) } }
如果要过渡效果，可以在acive类中加入css3的过渡动画。
这里面是用$http和$q来实现了一个延迟异步拉取数据，通过这样组合函数可以使函数功能更加健壮，也更方便监控函数。我以后会花时间专门来解释angularjs的$q和jquery的$Deferred的内容，其实原理差不多，都实现了promise操作。
用JavaScript的实现方法的难点，在于如何实现元素的增加和减少，这样才能触发AngularJs的动画效果。这次写了一个，但是在开始运行的时候有个小瑕疵，就是小按钮的步长一定要加上1，才和照片同步。不知道怎么造成的，以后再来填坑，如有不妥的地方，欢迎指出。
还有一种写法，我不太推荐，虽然很好写，我把思路大概说一下，就是建立一个数组，用来存放图片的src等信息，每次从里面取出一个，用双向绑定到img的src上，当下现读取img，当到下一个的时候，把img的src清空，并且赋值下一个。以此循环，这样虽然也可以做到轮播，但是这样极大的增加了http请求数量，在网速低的情况下，体验很不好，我不推荐。
所有我很推荐我这种写法，虽然啰嗦点，但是体验好啊。
<!DOCTYPE html> <html lang="en" ng-app="lunbo"> <head> <meta charset="UTF-8"> <script src="https://www.jb51.net/lib/angular.min.js" type="text/javascript"></script> <script src="https://www.jb51.net/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"> <div ng-mouseleave="start()"> <ul ng-switch="pic"> <li ng-switch-when="0"><a href="https://www.jb51.net/{{img1.href}}"><img src="https://www.jb51.net/{{img1.src}}" alt=""/></a></li> <li ng-switch-when="1"><a href="https://www.jb51.net/{{img2.href}}"><img src="https://www.jb51.net/{{img2.src}}" alt=""/></a></li> <li ng-switch-when="2"><a href="https://www.jb51.net/{{img3.href}}"><img src="https://www.jb51.net/{{img3.src}}" alt=""/></a></li> <li ng-switch-when="3"><a href="https://www.jb51.net/{{img4.href}}"><img src="https://www.jb51.net/{{img4.src}}" alt=""/></a></li> <li ng-switch-when="4"><a href="https://www.jb51.net/{{img5.href}}"><img src="https://www.jb51.net/{{img5.src}}" alt=""/></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; } } }]); /*这个服务有问题，需改进，暂时没想到解决办法*/ 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(); /*点击事件*/ 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; }; /*鼠标移除动画重新开始*/ scope.start= function () { $timeout.cancel(time); stepFun(); } } } }]); app.animation('.fade-in', function () { return{ enter: function (element, done) { var step=0; var time=null;//计时器 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>
总结
以上就是这篇文章的全部内容，希望对大家的学习和工作能有一定的帮助，如果有疑问大家可以留言交流。
您可能感兴趣的文章: