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 ...
随机推荐
- linux如何搭建sftp服务器
工具/原料 centos7.2_x64 方法/步骤 创建sftp组 groupadd sftp 创建完成之后使用cat /etc/group命令组的信息 2 创建一个sftp用户mysft ...
- 线特征---Edge Drawing（七）
http://ceng.anadolu.edu.tr/cv/edgedrawing/ References C. Topal, C. Akinlar, Edge Drawing: A Combined ...
- linux操作系统-两台linux服务器SSH免密码登录
A为本地主机(即用于控制其他主机的机器) ; B为远程主机(即被控制的机器Server), ip为192.168.100.247 ; A和B的系统都是Linux 在A上的命令 # ssh-keyg ...
- js全局作用域
全局作用域 不在任何函数内定义的变量就具有全局作用域.实际上,JavaScript默认有一个全局对象window,全局作用域的变量实际上被绑定到window的一个属性: var course = 'L ...
- js分割数字
var str = "123"; var b = String(str).split(''); 打印b[0].b[1].b[2]看效果...
- PHP——explode的应用（获取字符串，拆为下拉列表）
<?php //定义有默认值的函数 function Main3($f=5,$g=6) { echo $f*$g; } Main3(2,3); echo "<br />&q ...
- 大数乘法java版
import java.util.*; import java.math.*; public class NumMul{ public static void main(String args[]){ ...
- Porsche PIWIS III with V37.250.020 Piwis 3 Software Update New Feature
Porsche Piwis tester 3 PT3G VCI with V37.250.020 Piwis 3 Software unlimited license installed on Ful ...
- Oracle数据库mybatis 插入空值时报错（with JdbcType OTHER）
参考文档: 1.https://blog.csdn.net/fishernemo/article/details/27649233 2.http://helgaxu.iteye.com/blog/21 ...
- BZOJ1217或洛谷2279 [HNOI2003]消防局的设立
BZOJ原题链接 洛谷原题链接 该题有两种做法,树形\(DP\)和贪心. 先讲贪心. 先将所有点按深度从大到小排序,然后从大到小依次取出点,若已经被覆盖则跳过,否则就在它的祖父点建立消防站. 考虑如何 ...