利用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 相关文章推荐
JavaScript 设计模式之组合模式解析
Apr 09 Javascript
Javascript字符串对象的常用方法简明版
Jun 26 Javascript
Javascript实现飞动广告效果的方法
May 25 Javascript
JS实现仿苹果底部任务栏菜单效果代码
Aug 28 Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
May 09 Javascript
JS留言功能的简单实现案例(推荐)
Jun 23 Javascript
第一次接触神奇的Bootstrap表单
Jul 27 Javascript
jQuery内容筛选选择器实例代码
Feb 06 Javascript
jQuery Masonry瀑布流布局神器使用详解
May 25 jQuery
浅谈webpack和webpack-cli模块源码分析
Jan 19 Javascript
安装多版本Vue-CLI的实现方法
Mar 24 Javascript
使用Vue.js和MJML创建响应式电子邮件
Mar 23 Vue.js
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
php图片上传类 附调用方法
2016/05/15 PHP
PHP验证码类ValidateCode解析
2017/01/07 PHP
PHP结合Vue实现滚动底部加载效果
2017/12/17 PHP
PHP性能分析工具xhprof的安装使用与注意事项
2017/12/19 PHP
关于laravel 数据库迁移中integer类型是无法指定长度的问题
2019/10/09 PHP
DOMAssitant最新版 DOMAssistant 2.5发布
2007/12/25 Javascript
最简单的jQuery程序 入门者学习
2009/07/09 Javascript
jQuery 使用手册(一)
2009/09/23 Javascript
JS通过相同的name进行表格求和代码
2013/08/18 Javascript
使用javascript实现页面定时跳转总结篇
2013/09/21 Javascript
再谈Jquery Ajax方法传递到action(补充)
2014/05/12 Javascript
javascript实现的右下角弹窗实例
2015/04/24 Javascript
CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
2015/05/12 Javascript
详解JavaScript中的every()方法
2015/06/08 Javascript
js中跨域方法原理详解
2015/07/19 Javascript
js的form表单提交url传参数(包含+等特殊字符)的两种解决方法
2016/05/25 Javascript
前端框架Vue.js中Directive知识详解
2016/09/12 Javascript
Js自定义多选框效果的实例代码
2017/07/05 Javascript
关于meta viewport中target-densitydpi属性详解(推荐)
2017/08/18 Javascript
使用JQuery实现图片轮播效果的实例(推荐)
2017/10/24 jQuery
vue中element 的upload组件发送请求给后端操作
2020/09/07 Javascript
[02:43]2018DOTA2亚洲邀请赛主赛事首日TOP5
2018/04/04 DOTA
深入讨论Python函数的参数的默认值所引发的问题的原因
2015/03/30 Python
Python优化技巧之利用ctypes提高执行速度
2016/09/11 Python
python文本数据处理学习笔记详解
2019/06/17 Python
python实现一个函数版的名片管理系统过程解析
2019/08/27 Python
python GUI库图形界面开发之PyQt5表单布局控件QFormLayout详细使用方法与实例
2020/03/06 Python
Pycharm生成可执行文件.exe的实现方法
2020/06/02 Python
html5应用缓存_动力节点Java学院整理
2017/07/13 HTML / CSS
动物学专业毕业生求职信
2013/10/11 职场文书
会计应届生的自荐信
2013/12/13 职场文书
餐饮采购员岗位职责
2014/03/15 职场文书
学校食品安全实施方案
2014/06/14 职场文书
学校光盘行动倡议书
2015/04/28 职场文书
python如何为list实现find方法
2022/05/30 Python
Go Grpc Gateway兼容HTTP协议文档自动生成网关
2022/06/16 Golang