编程 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 function、指针及内置对象

Feb 19 Javascript

js获取单选框或复选框值及操作

Dec 18 Javascript

EditPlus注册码生成器(js代码实现)

Mar 25 Javascript

instanceof和typeof运算符的区别详解

Jan 06 Javascript

Javascript中String的常用方法实例分析

Jun 13 Javascript

Bootstrap表单使用方法详解

Feb 17 Javascript

详解AngularJs ui-router 路由的简单介绍

Apr 26 Javascript

JS+Ajax实现百度智能搜索框

Aug 04 Javascript

Layui实现带查询条件的分页

Jul 27 Javascript

Layui点击图片弹框预览的实现方法

Sep 16 Javascript

关于vue表单提交防双/多击的例子

Oct 31 Javascript

微信小程序scroll-view不能左右滑动问题的解决方法

Jul 09 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