AngularJS实战之ngAnimate插件实现轮播
第一步：引入angular-animate.js
第二步：注入ngAnimate
var lxApp = angular.module("lxApp", [ 'ngAnimate' ]);
第三步：定义controller，设置好三张轮播图片
.z_login_bg1 {
position: absolute;
width: 100%;
height: 100%;
left: 0;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-image: url("themes/default/images/bg1.jpg");
}
.z_login_bg2 {
position: absolute;
width: 100%;
height: 100%;
left: 0;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-image: url("themes/default/images/bg2.jpg");
}
.z_login_bg3 {
position: absolute;
width: 100%;
height: 100%;
left: 0;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-image: url("themes/default/images/bg3.jpg");
}
<body ng-controller="lxCtrl">
<div ng-if="bgindex==0" class="z_login_bg1 bg_exchange"></div>
<div ng-if="bgindex==1" class="z_login_bg2 bg_exchange"></div>
<div ng-if="bgindex==2" class="z_login_bg3 bg_exchange"></div>
</body>
第四步：制作动画效果
lxApp.animation(".bg_exchange", [ "$animateCss", function($animateCss) {
return {
enter : function(element) {
return $animateCss(element, {
from : {
opacity : 0
},
to : {
opacity : 1
},
duration : 0.5
});
},
leave : function(element) {
return $animateCss(element, {
from : {
opacity : 1
},
to : {
opacity : 0
},
duration : 0.5
});
}
};
} ]);
第五步：使用$interval控制图片切换
lxApp.controller("lxCtrl", function($interval,$scope) {
$scope.bgindex = 0;
$interval(function() {
$scope.bgindex++;
if ($scope.bgindex >= 3) {
$scope.bgindex = 0;
}
}, 5500);
});
第六步：手动启动angular
angular.bootstrap(document,['lxApp']);
AngularJS实战之ngAnimate插件实现轮播的更多相关文章
- Bootstrap的js插件之轮播(carousel)
轮播请查看下面演示样例.基本已经涵盖最经常使用的一个轮播 <!DOCTYPE html> <html lang="en"> <head> < ...
- React中使用CSSTransitionGroup插件实现轮播图
动画效果,是一个页面上必不可少的功能,学习一个新的东西,当然就要学习,如何用新的东西,用它的方法去实现以前的东西啦.今天呢,我就在这里介绍一个试用react-addons-css-transition ...
- vue项目全局引入vue-awesome-swiper插件做出轮播效果
在安装了vue的前提下,打开命令行窗口,输入vue init webpack swiper-test,创建一个vue项目且名为swiper-test(创建速度可能会有点慢,耐心等),博文讲完后,源码托 ...
- ionic3 使用swiper插件 实现轮播效果
由于app的更新迭代 我需要完成新版本设计图的开发 刚开始就遇到一个问题 首页的banner图需要实现某种效果 而ionic3自带的轮播图效果怎么改都改不到我想要的效果 效果图如下 自动播放 不断 ...
- 插件-3D轮播图
先上效果图 查看实例点击 这里 这个栗子中,可以选择展示 5 张 或者展示 3 张,即使是只有一个slide,也可以完成布局,正常轮播,麻麻再也不用怕只有4个slid而不能用这种轮播啦! 本栗实现原 ...
- Bootstrap插件-carousel(轮播图)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Jquery插件---渐隐轮播
//需求:打开网页时,每秒钟自动切换下一张图片内容.也可以用鼠标点导航按钮进行图片切换 //代码如下 <!DOCTYPE html> <html lang="en" ...
- layui常用插件(一) 轮播图
轮播图 <html lang="en"> <head> <meta charset="UTF-8"> <meta ht ...
- slider插件制作轮播图
html代码: <div id="banner_tabs" class="flexslider"> <ul class="slide ...
随机推荐
- WEB框架Django之ORM操作
一 ORM的简介 MVC或者MVC框架中包括的一个重要部分就是ORM,它实现了数据模型与数据库的解耦. 即数据模型的设计不需要依赖于特定的数据库,通过简单的配置可以轻松更换数据库,这可以大大减少开发人 ...
- 服务器webapi集成极光推送学习笔记
一路坎坷,坑死你!!!入坑需做好心理准备. 第一天: 其文档支持不给力,和微信的文档支持比起来能气死你,刚开始弄,看了一大堆东西,找不到头绪从哪里开始弄.只好找了一些文档,先了解了其基本原理,参考文章 ...
- Dottrace 10.0.2 使用心得
开发环境vs2015 软件:JetBrains dotTrace 10.0.2 刚开始不知道怎么下手,多看了一会还有一位仁兄的解释.算是对某个功能小有入门了. 当前会查看某个方法在抓取快照时间它的执行 ...
- git bug修复
在Git中,由于分支是如此的强大,所以,每个bug都可以通过一个新的临时分支来修复,修复后,合并分支,然后将临时分支删除. 当你接到一个修复一个代号101的bug的任务时,很自然地,你想创建一个分支i ...
- url中含有%
Server.UrlEncode(“参数”)也可以使用javascript 的编码方式href="页面?name=encodeURI("参数")传送页代码编码 接收页代码 ...
- andorid 配置器组件和提示消息
.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android ...
- PHP Jquery 代码操作 内容 属性 样式 事件 Json数据
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- [Jmeter] Run Command to generate a specific listener’s chart report
Run Command to generate a specific listener’s chart report: Download cmdrunner-2.0.jar : https://jme ...
- Spring ApplicationContext（六）BeanPostProcessor
Spring ApplicationContext(六)BeanPostProcessor 产生回顾一下 ApplicationContext 初始化的几个步骤:第一步是刷新环境变量:第二步是刷新 b ...
- cpp 区块链模拟示例(七) 补充 Merkle树
Merkle 树 完整的比特币数据库(也就是区块链)需要超过 140 Gb 的磁盘空间.因为比特币的去中心化特性,网络中的每个节点必须是独立,自给自足的,也就是每个节点必须存储一个区块链的完整副本.随 ...