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

来源：互联网发布：免费域名邮箱申请编辑：程序博客网时间：2024/06/17 22:51

最近在学习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>

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

0 0