第一步：引入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']);
分享到：
相关推荐
在这个场景下，我们讨论的是一个名为"图片轮播左右轮播封装插件"的工具，它为开发者提供了便捷的方式来实现这一功能。下面将详细阐述这个插件的相关知识点。 首先，我们要理解“封装”的概念。在编程中，封装是面向...
在IT领域，jQuery轮播插件是网页设计中不可或缺的一部分，尤其在响应式网页设计中，它们被广泛用于实现图片、内容或广告的自动滚动效果。"个人jQuery轮播插件"很可能是一个由个人开发者创建的，专为手机和自适应布局...
首先，Swiper插件的核心是其JavaScript库，它通过处理DOM元素的布局和动画来实现滑动效果。在HTML中，我们需要创建一个容器元素，用于包含所有的视频或图片。例如： ```html ...
在本文中，我们将探讨如何使用AngularJS来创建一个轮播图效果。AngularJS是一个强大的JavaScript框架，用于构建动态Web应用程序。结合Bootstrap库，我们可以轻松地实现轮播组件，这是一个常见的功能，用于展示多张...
JavaScript实现轮播特效（代码）JavaScript实现轮播特效（代码）JavaScript实现轮播特效（代码）JavaScript实现轮播特效（代码）JavaScript实现轮播特效（代码）JavaScript实现轮播特效（代码）JavaScript实现轮播...
通过轮播插件，开发者能够轻松实现内容的滑动切换，增强用户体验，同时保持页面的整洁与有序。 在这款“js轮播插件”中，其主要功能包括： 1. **多用途**：适用于各种类型的网站，无论是在电子商务平台、企业官网...
在React Native（RN）开发中，我们经常需要实现各种用户界面元素，其中之一就是轮播图。轮播图是一种常见的UI组件，通常用于展示广告、图片或任何其他需要循环播放的内容。在这个场景中，我们将利用RN的ScrollView...
标题"图片轮播插件"指的是一种能够实现图片自动轮换的软件组件，常用于网站设计和开发中，提升用户体验并增加页面的视觉效果。 描述中提到的“图片排列轮播，自动筛选播放源代码”，这表明这个插件具备了自动化功能...
本文实例为大家分享了jQuery实现轮播图及其原理的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" name="viewport" content="width=device-width,...
代码简介：兼容IE8的jQuery轮播图插件是一款兼容性很好的，使用非常简单的网站焦点图代码，依赖jquery和pageSwitch.js来实现轮播效果，轮播图以背景图的方式插入到当前页面进行轮播，并且可自定义轮播间隔时间等一...
这款插件的主要功能是实现轮播幻灯片的效果，它可以在论坛首页展示一系列图片和文字内容，形成动态的展示区域。这种轮播方式不仅能够吸引用户的注意力，还能高效地利用有限的空间展示更多的信息。幻灯片通常包含多个...
使用插件实现图片轮播效果： 通过设置传入的参数autoScroll，numControl和arrowControl的值可以显示不同的效果 图片轮播效果一：设置autoScroll=true，numControl=false，arrowControl=false，图片自动轮播，当鼠标...
总的来说，"Jquery插件图片轮播带控制"提供了一套完整的图片轮播解决方案，包括基本的图片切换、动画效果、参数定制和用户交互，使得开发者能够轻松地在网站上实现高质量的图片展示效果。在实际开发中，可以根据项目...
在Android开发中，ViewPager是一种非常常用的组件，常用于实现页面滑动效果，比如常见的轮播图。本项目“ViewPager和Handler结合使用实现轮播图”就是利用这两种关键元素来创建一个自动滚动的图片展示功能，并且增加...
"织梦banner轮播图插件"是一款专为织梦内容管理系统（DedeCMS）设计的扩展组件，旨在帮助用户轻松实现网站首页的动态轮播图功能。这款插件允许用户自定义创建多个轮播图分类，每个分类下可以添加多张图片，同时支持...
Unity Carousel轮播图像插件是一款专为Unity游戏引擎设计的组件，它提供了高效且美观的图像展示方式，常用于创建动态展示区或者信息滚动条。该插件的主要特性包括： 1. **触控拖动转轮**：在移动设备或支持触摸的...
4. **轮播图**：`ng-bs-carousel`，实现Bootstrap的轮播图效果。 5. **下拉菜单**：`ng-bs-dropdown`，创建具有下拉选项的菜单。 这些组件广泛应用于创建响应式和交互性强的Web界面，特别是在需要快速开发并保持...
这种插件充分利用了jQuery库的强大功能，使其能够适应不同设备和屏幕尺寸，确保在手机、平板电脑和桌面电脑上都能实现流畅的轮播效果。 在网页设计中，无缝轮播通常指的是用户在浏览图片时，前一张图片还未完全消失...
在Android开发中，ViewPager是一个非常重要的组件，常用于实现页面滑动效果，如常见的轮播图、tab切换等。在本“viewPager实现轮播图Demo”中，我们将深入探讨如何利用ViewPager创建一个无限循环的轮播效果。 首先...
"jQuery插件之幻灯片轮播插件"正是这样一款工具，它拥有独特的过渡效果、高度的灵活性以及对不同设备的良好兼容性，尤其适用于移动设备如Android和iPhone。 首先，我们来了解一下幻灯片轮播的核心功能。幻灯片轮播...