基于Angular-animate.js和css实现的轮播图

最新推荐文章于 2024-05-08 09:40:26 发布
最新推荐文章于 2024-05-08 09:40:26 发布
阅读量4.6k 收藏 1
点赞数
分类专栏： angular ng-animate css3动画 轮播图 文章标签： angular css3 ng-animate 轮播图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34079227/article/details/53114453
版权

  最近在学习angularJS和foundation进行前端开发, 需要一款轮播图.简单做了一个,能够进行无缝轮播,带有滑动效果,点击上/下一张时从新开始定时器轮播的功能.

首先进行外部文件的引用:

<link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/foundation/6.2.4/foundation.min.css">
<script type="text/javascript" src = "http://cdn.bootcss.com/angular.js/1.5.0/angular.min.js"></script>
<script type="text/javascript" src = "http://cdn.bootcss.com/angular.js/1.5.0/angular-animate.min.js"></script>

设置CSS样式: 

<style type="text/css">
		.mydiv{
			position: relative;
			width: 100%;
			height: 370px;
			background-color: green;
			overflow: hidden;
		}//整个div的样式
		.li-img{
			width: 100%;
			height: auto;
		}
		.leftButton{
			position: absolute;
			top: 45%;
		}
		.rightButton{
			position: absolute;
			top: 45%;
			right: 0;
		}
		@keyframes left-hide {
			from{
				margin-left: 0;
			}
			to{
				margin-left: -100%;
			}
		}//图片从左面隐藏的动画
		@keyframes left-show{
			from{
				margin-left: -100%;
			}
			to{
				margin-left: 0;
			}
		}//图片从左面出现的动画
		@keyframes right-hide{
			from{
				margin-left: 0;
			}
			to{
				margin-left: 100%;
			}
		}//图片从右面消失的动画
		@keyframes right-show{
			from{
				margin-left: 100%;
			}
			to{
				margin-left: 0;
			}
		}//图片从右面出现的动画
<span style="white-space:pre">		</span>//设置从左面ng-show/hide的过程动画
		.left-animation{
			height: auto;
			position: absolute;
			top: 0;
			width: 100%;
			overflow: hidden;
		}
		.left-animation.ng-hide-add{
			animation: left-hide 1s;
			
		}
		.left-animation.ng-hide-remove{
			animation: left-show 1s;
			
		}
<span style="white-space:pre">		</span>//设置从右面ng-show/hide的过程动画 
		.right-animation{
			height: auto;
			width: 100%;
			position: absolute;
			top: 0;
			overflow: hidden;
		}
		.right-animation.ng-hide-add{
			animation: right-hide 1s;
			
		}
		.right-animation.ng-hide-remove{
			animation: right-show 1s;
			
		}
	</style>
正文: 

<body ng-app = "MyApp" ng-controller = "MyCtrl" ng-init = "next()">//
	<div class = "mydiv text-center">
		<ul class = "no-bullet">
			<li class = "li-img" ng-show = "show01" ng-class = "{'fadeLeft':'left-animation', 'fadeRight':'right-animation'}[fade01]">
				<img src="img/Unknown.jpeg">
			</li>
			<li class = "li-img" ng-show = "show02" ng-class = "{'fadeLeft':'left-animation', 'fadeRight':'right-animation'}[fade02]">
				<img src="img/Unknown-2.jpeg">
			</li>
			<li class = "li-img" ng-show = "show03" ng-class = "{'fadeLeft':'left-animation', 'fadeRight':'right-animation'}[fade03]">
				<img src="img/Unknown-3.jpeg">
			</li>
			<li class = "li-img" ng-show = "show04" ng-class = "{'fadeLeft':'left-animation', 'fadeRight':'right-animation'}[fade04]">
				<img src="img/Unknown-4.jpeg">
			</li>
			<li class = "li-img" ng-show = "show05" ng-class = "{'fadeLeft':'left-animation', 'fadeRight':'right-animation'}[fade05]">
				<img src="img/Unknown-1.jpeg">
			</li>
		</ul>
		<div class = "leftButton" ng-click = "prevImg()">
			<button class = "button success large">上一张</button>
		</div>
		<div class = "rightButton" ng-click = "nextImg()">
			<button class = "button success large">下一张</button>
		</div>
	</div>
	<script type="text/javascript">
		var app = angular.module("MyApp", ['ngAnimate']);
		app.controller("MyCtrl", function ($scope,$interval,$timeout) {
			$scope.show01 = true;
			var index = 1;
			var timer;
			$scope.next = function () {
				switch(index){
					case 1:
						$scope.show01 = false;
						$scope.fade01 = 'fadeLeft';
						$scope.show02 = true;
						$scope.fade02 = 'fadeRight';
						index = 2;
						break;
					case 2:
						$scope.show02 = false;
						$scope.fade02 = 'fadeLeft';
						$scope.show03 = true;
						$scope.fade03 = 'fadeRight';
						index = 3;
						break;
					case 3:
						$scope.show03 = false;
						$scope.fade03 = 'fadeLeft';
						$scope.show04 = true;
						$scope.fade04 = 'fadeRight';
						index = 4;
						break;
					case 4:
						$scope.show04 = false;
						$scope.fade04 = 'fadeLeft';
						$scope.show05 = true;
						$scope.fade05 = 'fadeRight';
						index = 5;
						break;
					case 5:
						$scope.show05 = false;
						$scope.fade05 = 'fadeLeft';
						$scope.show01 = true;
						$scope.fade01 = 'fadeRight';
						index = 1;
						break;
				};
				timer = $timeout(function () {
					$scope.next();
				}, 3000);
			};
			$scope.prev = function () {
				switch(index){
					case 1:
						$scope.show01 = false;
						$scope.fade01 = 'fadeRight';
						$scope.show05 = true;
						$scope.fade05 = 'fadeLeft';
						index = 5;
						break;
					case 2:
						$scope.show02 = false;
						$scope.fade02 = 'fadeRight';
						$scope.show01 = true;
						$scope.fade01 = 'fadeLeft';
						index = 1;
						break;
					case 3:
						$scope.show03 = false;
						$scope.fade03 = 'fadeRight';
						$scope.show02 = true;
						$scope.fade02 = 'fadeLeft';
						index = 2;
						break;
					case 4:
						$scope.show04 = false;
						$scope.fade04 = 'fadeRight';
						$scope.show03 = true;
						$scope.fade03 = 'fadeLeft';
						index = 3;
						break;
					case 5:
						$scope.show05 = false;
						$scope.fade05 = 'fadeRight';
						$scope.show04 = true;
						$scope.fade04 = 'fadeLeft';
						index = 4;
						break;
				};
				timer = $timeout(function () {
					$scope.next();
				}, 3000);
			};
			$scope.nextImg = function () {
				if (angular.isDefined(timer)) {
					$timeout.cancel(timer);
					timer = undefined;
				}
				$scope.next();
			};
			$scope.prevImg = function () {
				if (angular.isDefined(timer)) {
					$timeout.cancel(timer);
					timer = undefined;
				}
				$scope.prev();
			};
		});
	</script>
</body>

大概的思路就是第一张图片从左面消失的时候,第二张图片要从右面出现,形成无缝连接




qq_34079227
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
angular-animate.min.js(v1.6.4版本)
04-10
angular-animate.min.js(v1.6.4版本)AngularJS 动画AngularJS 提供了动画效果，可以配合 CSS 使用。 AngularJS 使用动画需要引入 angular-animate.min.js 库。 angular-animate.min.js(v1.6.4版本)AngularJS 动画AngularJS 提供了动画效果，可以配合 CSS 使用。 AngularJS 使用动画需要引入 angular-animate.min.js 库。
Angular简易轮播图
cf8833的博客
03-29 1940
Angular简易轮播图 step1: D:\vue\untitled2905\src\app\app.component.css .con_img{ position: relative; width: auto; height: auto; } .ms{ position: absolute; bottom: 5px; left: 0; width: 41%; height: 10%; color: white; background-color:gray;
推荐一款强大的Angular滑动轮播组件：angular-slick-carousel
最新发布
gitblog_00073的博客
05-08 360
推荐一款强大的Angular滑动轮播组件：angular-slick-carousel 项目地址:https://gitcode.com/devmark/angular-slick-carousel 在Web开发中，展示动态或静态内容的滑动轮播是一个常见的需求，而选择一个易用且功能齐全的轮播库则至关重要。今天，我们向你推荐一款基于Angular的高效滑动轮播组件——angular-slick-ca...
angular7 wow.js + animate.css
weixin_45932463的博客
10-16 392
因为需要在原来angular 中做滚动条，元素执行动画， 所以想到wow.js wow.js 是一个轻量的小型的动画库 。废话不多说 首先： npm 下载 npm install --save wowjs 附上npm.js中的链接文档：https://www.npmjs.com/package/ngx-wow 下载完毕之后找到 这里面有： styles : 直接全局搜索就好了 添加： “node_modules/animate.css/animate.css” “scripts”: [ “node_m
AngularJS实战之ngAnimate插件实现轮播
weixin_30376323的博客
11-08 123
第一步：引入angular-animate.js 第二步：注入ngAnimate var lxApp = angular.module("lxApp", [ 'ngAnimate' ]); 第三步：定义controller，设置好三张轮播图片 .z_login_bg1 { position: absolute; width: 100%; height: 100%; left...
js实现动态轮播图，自动播放，动画形式播放，循环播放
小北风的博客
10-14 4048
html部分 <body> <div id="box"> <div id="lunbo"> <ul> <li><img src="./imgs/1.jpg" alt="" style="width: 500px;"></li> <li><img src="./imgs/2.jpg" alt=""
jQuery/jquery-1.7.2.min.js jquery-1.7.2.js 文件
04-06
7. **插件生态**：jQuery拥有庞大的插件生态系统，可以方便地扩展功能，如表单验证、轮播图、弹窗等。 **使用jQuery** 要在网页中使用jQuery，通常需要在HTML文档的`<head>`部分引入jQuery库的脚本文件，然后在`...
jquery-1.5.1.js;jquery-1.5.1.min.js 框架
04-27
4. **动画效果（Effects）**：jQuery内置了各种动画效果，如`fadeIn()`和`fadeOut()`实现元素的淡入淡出，`slideUp()`和`slideDown()`实现滑动效果，`animate()`可以自定义复杂的动画。 5. **Ajax交互（Ajax）**：...
javascript--texiao-343.zip_javascript
09-19
3. **CSS操作**：JavaScript可以动态修改元素的CSS样式，从而实现动态改变元素外观，例如改变颜色、大小、位置等，创建炫酷的过渡和动画。 4. **AJAX异步通信**：AJAX允许网页在不刷新整个页面的情况下与服务器交换...
利用AngularJs实现京东首页轮播图效果
10-21
在本文中，我们将探讨如何利用AngularJS框架来实现京东首页那样的轮播图效果。AngularJS是一种流行的前端开发框架，它提供了强大的数据绑定和指令系统，使得动态页面交互变得简单易行。在创建轮播图时，我们可以利用...
jquery-1.4.2.min.rar_JavaScript/JQuery_JavaScript_
08-12
7. **插件生态**：jQuery拥有庞大的插件生态系统，开发者可以找到各种预设的功能，如轮播图、日期选择器等，极大地扩展了jQuery的功能范围。 总的来说，jQuery 1.4.2.min.js作为JavaScript库，以其高效、易用和广泛...
angular-animate.min.js
10-24
angular-animate.min.js AngularJS 是一个 JavaScript框架。它是一个以 JavaScript 编写的库。
使用Angular 6创建各种动画效果的方法
12-08
就技术角度而言，动画可以被定义为从初始状态到最终状态的转换过程。如今它已是各种Web应用不可或缺的组成部分。通过动画，我们不仅能创建出各种酷炫的UI，同时它们也能增加应用程序的趣味性。因此，设计精美的动画在吸引用户眼球的同时，也增强了他们的浏览体验。 Angular能够让我们创建出具有原生表现效果的动画。我们将通过本文学习到如何使用Angular 6来创建各种动画效果。在此，我们将使用Visual Studio Code来进行示例演示。 准备工作 安装Visual Studio Code和Angular CLI。 如果您是新手，请参阅我以前的Angular 6.0入门文章(https://dz
css-animator, 使用支持 Angular的CSS类对元素进行动画处理.zip
09-17
css-animator, 使用支持 Angular的CSS类对元素进行动画处理 css动画在 animate.css 库中使用CSS动画，在没有可用的动画生成器的情况下，这个包是created的。CSS动画程序适用于任何JavaScript应用程序，并且不需要手动应用CSS动画。 它还负责定位正在进行动画处理的元
用jQuery的Animate方法实现公告轮播效果，文字停留几秒后向上滚动
07-31
用jQuery的Animate方法实现公告轮播效果，文字停留几秒后向上滚动，类似招行app的那个公告效果，可自定义停留时间，样式自己写css调节，放在mui框架可以看到一个可爱的小喇叭。/笑脸/
AngularJS1.2.19&1.3.0完整版
07-10
上次上传的不完整只是angularjs的核心部分。文件内容包括angular,js,angular-animate.js,angular-cookie.js,angular-loader.js,angular-mock.js,angular-resource.js,angular-route.js,angular-sanitize.js,angular-scenario.js,angular-touch.js等，是github源代码的打包合并和压缩后的代码。 官网地址：https://angularjs.org
AngularJS实现轮播图
知识中转站
01-11 7150
AngularJS carousel .carousel-indicators li{ margin-left: 5px; margin-right: 5px; }
js + css animate 实现一个轮播图
齐枫的博客
09-19 891
js + css animate 实现一个轮播图 <!DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8'> <meta name='referrer' content='always'> <meta name='author' conten...
angular-scripts.min.js:4 TypeError: Cannot read properties of undefined (reading 'draw')
09-07
具体来说，在这个例子中，错误信息是Uncaught TypeError: Cannot read properties of undefined (reading 'draw')，它指的是在angular-scripts.min.js文件的第4行尝试读取一个undefined对象的'draw'属性。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值