angularjs轮播
轮播，在基于别人的轮播上的angular无缝轮播
这个项目还没有达到很酷炫的效果，要在原有的基础上加上ng-animate就会好多了，目前我对他还不是很熟悉，所以这里还有欠缺
<!DOCTYPE html>
<html lang="en" ng-app="lunbo">
<head>
<meta charset="UTF-8">
<script src="angular.min.js" type="text/javascript"></script>
<title></title>
<style>
*{
margin:0;
padding:0
}
.content{width:600px;overflow:hidden;height:200px;position:relative;}
ul{
position:absolute;
left:0;
top:0;
width:1200px;
}
ul li{
width:200px;
height: 200px;
display: inline-block;
}
img{
width:100%;
height:100%;
}
</style>
</head>
<body ng-controller="lunboController">
<div lunbo ></div>
<script type="text/ng-template" id="lunbo.html">
<div class="content">
<ul>
<li ng-repeat="img in images"
class="fade" >
<a href="{{img.href}}"><img src="{{img.src}}" alt=""/></a></li>
</ul>
</div>
<div class="incon1" ng-click="prev()">111</div>
<div class="incon2" ng-click="next()">222</div>
</script>
</body>
<script>
var app=angular.module('lunbo',[]);
app.controller('lunboController',['$scope','readJSON', function ($scope,readJSON) {
}]);
app.factory('readJSON',['$http','$q', function ($http,$q) {
return {
query: function () {
var deferred=$q.defer();
$http({
method:'GET',
url:'img.json'
}).success(function (data, status, header, config) {
deferred.resolve(data);
}).error(function (data, status, header, config) {
deferred.reject(data);
});
return deferred.promise;
}
}
}]);
app.directive('lunbo',['readJSON','$interval', function (readJSON,$interval) {
return{
restrict:'EA',
templateUrl:'lunbo.html',
scope:{},
link: function (scope, element, attr) {
var promise=readJSON.query();
scope.flag=false;
promise.then(function (data) {
console.log(data);
scope.images=data;
});
scope.step=0;
var timer
scope.prev=function(){
if(scope.step==0){
element.find("ul").css("left","-600px");
scope.step=3
}
var jiuzhi=-scope.step*200;
--scope.step;
var nowzhi=-scope.step*200;
$interval.cancel(timer)
timer=$interval(function(){
if(jiuzhi>=nowzhi){
$interval.cancel(timer)
}else{
jiuzhi = jiuzhi+40
element.find("ul").css("left",jiuzhi+'px');
}
},100)
}
scope.next=function(){
if(scope.step==3){
element.find("ul").css("left","-400px");
scope.step=0
}
var jiuzhi=-scope.step*200;
++scope.step;
var nowzhi=-scope.step*200;
$interval.cancel(timer)
timer=$interval(function(){
if(jiuzhi<=nowzhi){
$interval.cancel(timer)
}else{
jiuzhi = jiuzhi-40
element.find("ul").css("left",jiuzhi+'px');
}
},100)
}
}
}
}]);
</script>
</html>
//img.json
{ "href":"http://www.google.com", "src":"img/1.jpg", "alt":"1" }, { "href":"http://www.google.com", "src":"img/2.jpg", "alt":"2" }, { "href":"http://www.google.com", "src":"img/3.jpg", "alt":"1" }, { "href":"http://www.google.com", "src":"img/1.jpg", "alt":"1" }, { "href":"http://www.google.com", "src":"img/2.jpg", "alt":"2" }, { "href":"http://www.google.com", "src":"img/3.jpg", "alt":"1" } ]
