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 ...
随机推荐
- setTimeout设置为0的意义
今天再看 Promise 代码时,有个地方用到了setTimeOut函数,但是第2个参数设为0,顿时懵逼了,这是啥意思? function resolve(newValue) { value = ne ...
- cherry-pick 命令
拣选会提取某次提交的补丁,之后尝试将其重新应用到当前分支上. 这种方式在你只想引入特性分支中的某个提交时很有用. 假设你的项目提交历史如下: 如果你希望将提交 e43a6 拉取到 master 分支, ...
- node.js中对Event Loop事件循环的理解
javascript是单线程的,所以任务的执行都需要排队,任务分为两种,一种是同步任务,一种是异步任务. 同步任务是进入主线程上排队执行的任务,上一个任务执行完了,下一个任务才会执行. 异步任务是不进 ...
- TF30063：没有访问xxx的权限 vs2017
凭据什么的都删掉了,还是无法连接上,最后同事用一种方法o(╥﹏╥)o,先登录vs2015的tfs账号,然后再vs2017上面登录tfs账号即可解决.PS:网上很多文章都是抄的,这个Bug真TM恶心.
- asp.net core webapi 似乎未安装在 IIS 中承载 .NET Core 项目所需的 AspNetCoreModule。请尝试修复 Visual Studio 以纠正该问题。
安装 DotNetCore.1.1.0-WindowsHosting 后,提示如题错误. 解决办法: ASP.NET Core 应用程序运行,可以选择 IIS Express 也可以选择 自己运行 , ...
- u-boot之内核是怎么启动的
在u-boot之start_armboot函数分析已经分析过了整个程序框架,但只是说了下什么时候运行内核,并没有具体说明是怎么执行内核的.内核启动分以下几个步骤说明: 1.启动参数bootcmd=na ...
- pyspider入门
1.http://www.pyspider.cn/jiaocheng/pyspider-webui-12.html 2.https://blog.csdn.net/weixin_37947156/ar ...
- MFC 一个无参线程的CreateThread 使用
最近想把c#的一个工作中用到的软件用MFC 实现出来, 刚下手 要了解的东西挺多,不但要对c++的语法,大体看一遍. 还要看MFC 内一些窗体,之类的相关的定义,比如cpp ,.h 内的类的定义方式等 ...
- iOS.BackgroundTask
Background Task 的运行时间在iOS 6及以前有大约10分钟左右,在iOS 7中有180秒. Reference: 1. Multitasking in iOS 7 http://www ...
- linux系统web站点设置-http基础设置
一.httpd2.2的组成: /etc/httpd:服务器的根目录 conf/httpd.conf,conf.d/*:配置文件 conf/magic:MIME的配置文件 logs:日志文件的存放路径, ...