最近在學習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>