AngularJS实战之ngAnimate插件实现轮播

程序员文章站 2022-06-12 09:55:19

...

第一步：引入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']);