编程 Javascript

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

Posted in Javascript onSeptember 08, 2016

先来看看效果图

其实写一个轮播图还是蛮简单的，我想了两种种方法，来实现轮播图（实际上细分是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请求数量，在网速低的情况下，体验很不好，我不推荐。

所有我很推荐我这种写法，虽然??碌悖??翘逖楹冒　?/p>

<!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>

总结

以上就是这篇文章的全部内容，希望对大家的学习和工作能有一定的帮助，如果有疑问大家可以留言交流。

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

- Author -

MakingChoice

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript的对话框详解与参数

Mar 08 Javascript

jquery select(列表)的操作（取值/赋值）

Aug 06 Javascript

Tips 带三角可关闭的文字提示

Oct 06 Javascript

js拦截alert对话框另类应用

Jan 16 Javascript

js open() 与showModalDialog()方法使用介绍

Sep 10 Javascript

jquery中html、val与text三者属性取值的联系与区别介绍

Dec 29 Javascript

Angularjs实现多个页面共享数据的方式

Mar 29 Javascript

深入理解javascript中concat方法

Dec 12 Javascript

JS数组去重（4种方法）

Mar 27 Javascript

vue使用高德地图点击下钻上浮效果的实现思路

Oct 12 Javascript

JavaScript Window窗口对象属性和使用方法

Jan 19 Javascript

在antd Table中插入可编辑的单元格实例

Oct 28 Javascript

Vue.js每天必学之组件与组件间的通信

Sep 08 #Javascript

JS输出空格的简单实现方法

Sep 08 #Javascript

jQuery文本框得到与失去焦点动态改变样式效果

Sep 08 #Javascript

jQuery动态改变多行文本框高度的方法

Sep 07 #Javascript

jQuery Ajax使用FormData对象上传文件的方法

Sep 07 #Javascript

jQuery Dialog 取消右上角删除按钮事件

Sep 07 #Javascript

jQuery实现的表格展开伸缩效果实例

Sep 07 #Javascript