3

我正在尝试在 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

谢谢

4

1 回答 1

3

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

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

于 2013-07-09T09:18:35.017 回答