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"
  }
]

 

posted @ 2017-04-20 00:52  莺哥  阅读(543)  评论(0)    收藏  举报