先來看看效果圖
其實寫一個輪播圖還是蠻簡單的，我想了兩種種方法，來實現輪播圖（實際上細分是5種，但是其中兩種是操作dom原生，三種是利用AngularJs的動畫，所有歸為兩大類），等我寫出來，大家好好理解一下就好。
那我先寫一種，第一種是不使用angularjs的動畫模組，只使用指令來完成動畫的切換。在這裡面就是在指令裡操作dom元素，超級easy。
範例程式碼
<!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" class="fade-in style hidden" > <a href="{{img.href}}"><img src="{{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="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" class="fade-in "><a href="{{img1.href}}"><img src="{{img1.src}}" alt=""/></a></li> <li ng-switch-when="1" class="fade-in "><a href="{{img2.href}}"><img src="{{img2.src}}" alt=""/></a></li> <li ng-switch-when="2" class="fade-in "><a href="{{img3.href}}"><img src="{{img3.src}}" alt=""/></a></li> <li ng-switch-when="3" class="fade-in "><a href="{{img4.href}}"><img src="{{img4.src}}" alt=""/></a></li> <li ng-switch-when="4" class="fade-in "><a href="{{img5.href}}"><img src="{{img5.src}}" alt=""/></a></li> </ul> <ul class="listContent" > <li class="list" ng-click="clickEvent(0)" >1</li> <li class="list" ng-click="clickEvent(1)" >2</li> <li class="list" ng-click="clickEvent(2)" >3</li> <li class="list" ng-click="clickEvent(3)" >4</li> <li class="list" 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>
總結
以上就是這篇文章的全部內容，希望對大家的學習和工作能有一定的協助，如果有疑問大家可以留言交流。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
