• 利用AngularJs实现京东首页轮播图效果

    其实写一个轮播图还是蛮简单的，我想了两种种方法，来实现轮播图（实际上细分是5种，但是其中两种是操作dom原生，三种是利用AngularJs的动画，所有归为两大类），等我写出来，大家好好理解一下就好。

    那我先写一种，第一种是不使用angularjs的动画模块，只使用指令来完成动画的切换。在这里面就是在指令里操作dom元素，超级easy。

    示例代码

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    <!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>
    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    [
     {
     "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函数来完成的。

    另外一种是

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    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请求数量，在网速低的情况下，体验很不好，我不推荐。

    所有我很推荐我这种写法，虽然啰嗦点，但是体验好啊。

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    <!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;
        730px;
       height: 454px;
      }
      div ul.listContent{
       position: absolute;
       left: 500px;
       top: 410px;
        200px;
       height: 25px;
      }
      div ul.listContent li.list{
       position: relative;
       display: block;
        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>
  • 相关阅读:
    HEAP[xxx.exe]:Invalid Address specified to RtlValidateHeap 错误的解决方法总结
    C语言中对于结构的定义一般放在.h中还是.c中
    MFC线程(三):线程同步事件(event)与互斥(mutex)
    AfxOleInit()和::CoInitialize(NULL)区别
    C++格式化字符函数
    使用数据库连接池优化程序性能
    一个经试用效果非常不错的数据库连接池--JAVA
    VC:CString用法整理(转载)
    Apache配置多个监听端口和不同的网站目录的简单方法（转）
    Dedesql数据库类详解
  • 原文地址：https://www.cnblogs.com/lmy01/p/angularJS.html
Copyright © 2020-2023  润新知