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 ...
随机推荐
- android的Afinal框架下的数据库更新
项目需要,版本升级时给表添加了一些新的字段,发现出现异常. 解决方法:监听数据库的版本号,更新数据库. 创建FinalDb对象时使用如下的构造函数,监听版本号的变化: db = FinalDb.cre ...
- Head First Servlets & JSP 学习笔记 第五章 —— 作为Web应用
初始化参数:(init-param) 初始化参数写在web.xml文件中:(写在<servlet>标签内部) <servlet> <servlet-name>Bee ...
- 通配符的匹配很全面, 但无法找到元素 'tx:annotation-driven' 的声明
启动Tomcat时报错,通配符的匹配很全面, 但无法找到元素 'tx:annotation-driven' 的声明,报错如下 1.从报错可以看到找不到元素 tx:annotation-driven ...
- oracle数据库冷恢复
场 景:客户的服务器是在虚拟机上,结果虚拟机的服务器的硬盘坏掉了.硬盘换掉后,系统成功恢复出来,但是登录虚拟机后,数据库无法启动. 解决方案:通过冷恢复将数据库还原.在自己的电脑上搭建一个 ...
- .net项目错误:找不到方法:“System.Net.Http.HttpClient stellar_dotnet_sdk.Server.get_HttpClient()
1.由于在项目里面引用了一个 新的项目stellar_dotnet_sdk,在 return new StellarWallet(ConvertToWalletSetting(coin)); 的 ...
- Linux定时任务Crontab使用 提示no crontab for root
使用命令查询crontab 任务时,一直提示:no crontab for root .查看了一些资料,说是crontab在初始时,设置了一次编辑方式,所以试了一下crontab -e的方式编辑,即在 ...
- 浏览器与服务器交互原理以及用java模拟浏览器操作v
浏览器应用服务器JavaPHPApache * 1,在HTTP的WEB应用中, 应用客户端和服务器之间的状态是通过Session来维持的, 而Session的本质就是Cookie, * 简单的讲,当浏 ...
- Mercedes offline programming/coding tips and guides
Mercedes offline programming/coding recommendations and guides: Offline coding: SCN or CVN coding wa ...
- PCR技术
qRT-PCR是指先由RNA进行反转录生成cDNA,然后以cDNA为模板进行检测,检测的是该cDNA的含量,而cDNA由特定的RNA逆转录而来,所以间接地检测了RNA的含量. 基因表达: 转录:DNA ...
- EL（表达式语言）
EL表达式的主要作用 1)获取数据.EL使得获取JavaBean中的数据变得非常简单,也可以替换JSP页面中的脚本元素,从各种类型的web域中获取数据. 2)执行运算.利用EL表达式可以在JSP页面中 ...