第一步:引入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']);
分享到:
相关推荐
使用Swiper 插件实现 类似于轮播图的视频轮播 轮播图
轮播-左右轮播封装插件,可以自动轮播,也可以鼠标进过,slide插件
使用swiper插件,实现轮播效果,banner自适应各种屏幕和手机大小
JavaScript实现轮播特效(代码)JavaScript实现轮播特效(代码)JavaScript实现轮播特效(代码)JavaScript实现轮播特效(代码)JavaScript实现轮播特效(代码)JavaScript实现轮播特效(代码)JavaScript实现轮播...
轮播插件 很好用 适用于手机 轮播等等 自适应
本文实例为大家分享了jQuery实现轮播图及其原理的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" name="viewport" content="width=device-width,...
代码简介:兼容IE8的jQuery轮播图插件是一款兼容性很好的,使用非常简单的网站焦点图代码,依赖jquery和pageSwitch.js来实现轮播效果,轮播图以背景图的方式插入到当前页面进行轮播,并且可自定义轮播间隔时间等一...
本文实例为大家分享了AngularJS轮播图的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html ng-app="myApp" lang="en"> <head> <meta charset="UTF-8"> <title>AngularJS ...
使用RN 的Scrollview 实现轮播图效果
多功能且稳定的轮播插件,可以根据设置参数的不同得到自己想要的轮播,可以设置自动轮播时间、是否自动轮播、是否显示轮播下面选中框,稍微改动css就能得到拥有你自己样式的轮播,代码中有详细的注释及其说明
discuz论坛插件DZ插件 轮播幻灯片 图文版 1.2 .
简单完成了ViewPager实现轮播图并添加了状态切换的小圆点
本文实例为大家分享了jquery插件实现轮播图的具体代码,供大家参考,具体内容如下 轮播图的实现(jquery插件) 需要引入jquery插件,去jquery官网搜索 <!DOCTYPE html> <html lang=en> <head> <...
一款很不错的轮播插件,支持键盘左右键控制,体验完美。
iOS:UIScrollView实现轮播,UIScrollView实现轮播,UIScrollView实现轮播
图片排列轮播,自动筛选播放源代码。setAuto(); 1、可附带title; 2、可附带链接;
Jquery插件图片轮播带控制,可以控制是否需要标题,以及轮播的高度宽度大小,轮播速度和轮播时间等等。
原生JS实现轮播图及轮播图插件
vue实现轮播图,实现滚动切换,无缝切换,自动切换,循环无回滚,暂停滚动等效果。适合初学者学习借鉴。对代码有疑问或者不懂的欢迎私信交流。
swiper实现轮播图几乎是没有一点点技术含量,但是用起来却很方便,包括对移动端的支持也很好。 由于简单这里当然就不会去详细介绍了,下面就来开始本文的正文内容 实现过程: 一.移动端-需求swiper 4.0.3实现层叠轮播 ...