使用AngularJS自我旋转图像

Question

我想在AngularJS中创建一个自转图像查看器。对不起，如果这个问题似乎很愚蠢，但我无法弄清楚angularJS的方式。我知道我可以使用jQuery在那里破解它，但我认为它应该可以在AngularJS中单独使用。

的HTML：

<div ng-controller="rotatorController"> 
    <div ng-switch on="pic" ng-animate=" 'animate' " id="rotator"> 
     <div ng-switch-when="1"><img src="/home/1.jpg"></div> 
     <div ng-switch-when="2"><img src="/home/2.jpg"></div> 
     <div ng-switch-when="3"><img src="/home/3.jpg"></div> 
    </div> 
    <div style="position: absolute; top: 600px" id="indexbuttons"> 
     <button ng-click="pic = '1';" class="button">1</button> 
     <button ng-click="pic = '2';" class="button">2</button> 
     <button ng-click="pic = '3';" class="button">3</button> 
    </div> 
</div> 

的CSS：

div#rotator { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    position: absolute; 
} 

.animate-enter, 
.animate-leave 
{ 
    -webkit-transition: 825ms cubic-bezier(0.455, 0.030, 0.515, 0.955) all; 
    -moz-transition: 825ms cubic-bezier(0.455, 0.030, 0.515, 0.955) all; 
    -ms-transition: 825ms cubic-bezier(0.455, 0.030, 0.515, 0.955) all; 
    -o-transition: 825ms cubic-bezier(0.455, 0.030, 0.515, 0.955) all; 
    transition: 825ms cubic-bezier(0.455, 0.030, 0.515, 0.955) all; 
    position: absolute; 
} 

.animate-enter { 
    left: 100%; 
} 
.animate-enter.animate-enter-active { 
    left: 0; 
} 

.animate-leave { 
    left: 0; 
} 
.animate-leave.animate-leave-active{ 
    left: -100%; 
} 

如何发送点击事件，在angularJS indexbuttons？还是有更好的方式来循环这些图片？

Plunker：http://plnkr.co/edit/QiYidN?p=catalogue

谢谢

Answer 1

你必须在你的控制器中添加一个循环。

app.controller('rotatorController', ['$scope', '$timeout', function($scope, $timeout) { 
    $scope.pic = 1; 

    var slideImage = function() { 
    var loop = $timeout(function changePic() { 
     if($scope.pic < 2){ 
      $scope.pic++; 
     } else { 
      $scope.pic = 1; 
     } 
     loop = $timeout(changePic, 2000); 
    },2000); 
    }(); 

}]) 

这里是plunker