基于Angular-animate.js和css实现的轮播图
羊冠玉
最近在学习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>大概的思路就是第一张图片从左面消失的时候,第二张图片要从右面出现,形成无缝连接
类似资料：