利用AngularJs實現(xiàn)京東首頁輪播圖效果

更新時間：2016年09月08日 09:17:23 作者：MakingChoice

這篇文章給大家介紹了如何利用AngularJs實現(xiàn)京東首頁輪播圖的效果，本文通過示例代碼詳細介紹了實現(xiàn)過程，對大家學(xué)習AngularJS具有一定參考借鑒價值，有需要的朋友們可以參考借鑒。

先來看看效果圖

其實寫一個輪播圖還是蠻簡單的，我想了兩種種方法，來實現(xiàn)輪播圖（實際上細分是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函數(shù)中的element對象調(diào)用angularjs自身封裝的jquery函數(shù)來完成的。

另外一種是

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來實現(xiàn)了一個延遲異步拉取數(shù)據(jù)，通過這樣組合函數(shù)可以使函數(shù)功能更加健壯，也更方便監(jiān)控函數(shù)。我以后會花時間專門來解釋angularjs的$q和jquery的$Deferred的內(nèi)容，其實原理差不多，都實現(xiàn)了promise操作。

用JavaScript的實現(xiàn)方法的難點，在于如何實現(xiàn)元素的增加和減少，這樣才能觸發(fā)AngularJs的動畫效果。這次寫了一個，但是在開始運行的時候有個小瑕疵，就是小按鈕的步長一定要加上1，才和照片同步。不知道怎么造成的，以后再來填坑，如有不妥的地方，歡迎指出。

還有一種寫法，我不太推薦，雖然很好寫，我把思路大概說一下，就是建立一個數(shù)組，用來存放圖片的src等信息，每次從里面取出一個，用雙向綁定到img的src上，當下現(xiàn)讀取img，當?shù)较乱粋€的時候，把img的src清空，并且賦值下一個。以此循環(huán)，這樣雖然也可以做到輪播，但是這樣極大的增加了http請求數(shù)量，在網(wǎng)速低的情況下，體驗很不好，我不推薦。

所有我很推薦我這種寫法，雖然啰嗦點，但是體驗好啊。

<!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;
   }
  }
 }]);
 /*這個服務(wù)有問題，需改進，暫時沒想到解決辦法*/
 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>

總結(jié)

以上就是這篇文章的全部內(nèi)容，希望對大家的學(xué)習和工作能有一定的幫助，如果有疑問大家可以留言交流。

您可能感興趣的文章: