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


Posted in Javascript onSeptember 08, 2016

先来看看效果图

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

其实写一个轮播图还是蛮简单的,我想了两种种方法,来实现轮播图(实际上细分是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>

总结

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

Javascript 相关文章推荐
js 操作select与option(示例讲解)
Dec 20 Javascript
JavaScript立即执行函数的三种不同写法
Sep 05 Javascript
jQuery实现购物车数字加减效果
Mar 14 Javascript
Jquery uploadify上传插件使用详解
Jan 13 Javascript
TinyMCE汉化及本地上传图片功能实例详解
May 31 Javascript
常用原生js自定义函数总结
Nov 20 Javascript
简单实现bootstrap导航效果
Feb 07 Javascript
jQuery插件form-validation-engine正则表达式操作示例
Feb 09 Javascript
JavaScript基本类型值-Number类型
Feb 24 Javascript
ES6模块化的import和export用法方法总结
Aug 08 Javascript
vue中选项卡点击切换且能滑动切换功能的实现代码
Nov 25 Javascript
新版小程序登录授权的方法
Dec 12 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
You might like
使用pthreads实现真正的PHP多线程(需PHP5.3以上版本)
2014/05/05 PHP
PH P5.2至5.5、5.6的新增功能详解
2014/07/14 PHP
8个PHP数组面试题
2015/06/23 PHP
Thinkphp框架中D方法与M方法的区别
2016/12/23 PHP
php cli模式下获取参数的方法
2017/05/05 PHP
PHP中遍历数组的三种常用方法实例分析
2019/06/24 PHP
php设计模式之组合模式实例详解【星际争霸游戏案例】
2020/03/27 PHP
jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF)
2010/05/22 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件打包下载
2010/09/15 Javascript
由Javascript实现的页面日历
2011/11/04 Javascript
SpringMVC restful 注解之@RequestBody进行json与object转换
2015/12/10 Javascript
jQuery调用WebMethod(PageMethod) NET2.0的方法
2016/04/15 Javascript
基于JavaScript实现下拉列表左右移动代码
2017/02/07 Javascript
在vue项目中使用Jquery-contextmenu插件的步骤讲解
2019/01/27 jQuery
深入学习js函数的隐式参数 arguments 和 this
2019/06/24 Javascript
如何通过shell脚本自动生成vue文件详解
2019/09/10 Javascript
vue+element tabs选项卡分页效果
2020/06/29 Javascript
javascript 内存模型实例详解
2020/04/18 Javascript
[06:14]《辉夜杯》外卡赛附加赛 4支战队巡礼
2015/10/23 DOTA
[57:53]Secret vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
在Python的struct模块中进行数据格式转换的方法
2015/06/17 Python
利用python写个下载teahour音频的小脚本
2017/05/08 Python
在VS Code上搭建Python开发环境的方法
2018/04/06 Python
python使用mitmproxy抓取浏览器请求的方法
2019/07/02 Python
解决python使用list()时总是报错的问题
2020/05/05 Python
Fossil德国官网:化石手表、手袋、珠宝及配件
2019/12/07 全球购物
英国在线定做百叶窗网站:Make My Blinds
2020/08/17 全球购物
单位消防安全制度
2014/01/12 职场文书
员工工作表扬信范文
2014/01/13 职场文书
好军嫂事迹材料
2014/01/15 职场文书
抄作业检讨书
2014/02/17 职场文书
无房证明范本
2014/09/17 职场文书
2014年中职班主任工作总结
2014/12/16 职场文书
python 爬取豆瓣网页的示例
2021/04/13 Python
「女孩的钓鱼慢活」全新版权绘公布
2022/03/21 日漫
SQL Server中搜索特定的对象
2022/05/25 SQL Server