Question

我创建了一个简单的照片滑块，但我不知道如何使这个无限。如何以角度方式制作此效果，请帮忙。我不想使用jquery，但如果它是唯一的方式，那么无论如何。

＆＃13;

var app = angular.module('stack', []);

app.controller('MainCtrl', function($scope) {
  $scope.images = ["http://lorempixel.com/600/200/sports/", "http://lorempixel.com/600/200/city/",
    "http://lorempixel.com/600/200/nature/"
  ];
  $scope.index = 0;
  var IMG_WIDTH = -600;
  $scope.next = function() {

    ++$scope.index;
    if ($scope.images.length <= $scope.index) {
      $scope.index = 0;
    }

    var pos = ($scope.index > 0) ? $scope.index * IMG_WIDTH : 0;

    $scope.listPosition = {
      transform: "translateX(" + pos + "px)"
    };

  }

  $scope.prev = function() {
    --$scope.index;
    if ($scope.index < 0) {
      $scope.index = $scope.images.length - 1;
    }

    var pos = ($scope.index > 0) ? $scope.index * IMG_WIDTH : 0;

    $scope.listPosition = {
      transform: "translateX(" + pos + "px)"
    };

  }
});

＆＃13;

.mt {
  margin-top: 2em;
}
.outer {
  max-width: 600px;
  overflow: hidden;
}
.slider {
  width: 90000px;
  position: relative;
  transition: all 1s;
}
.slider div {
  float: left;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link data-require="bootstrap@3.3.2" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />

<body ng-app="stack" ng-controller="MainCtrl">
  <div class="container-fluid">
    <div class="row mt">
      <div class="col-sm-6 col-sm-push-3">
        <div class="outer clearfix">
          <div class="slider clearfix" ng-style="listPosition">
            <div ng-repeat="image in images track by $index">
              <img ng-src="{{image}}" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <a class="btn btn-default" ng-click="next()">Next</a>
  <a class="btn btn-default" ng-click="prev()">Prev</a>
  <div></div>
</body>

＆＃13;

Answer 1

最简单的方法是随机播放$scope.images数组。

完成转换后，通过创建类似.no-transition类的内容并将其添加到滑块或以您可以想象的任何其他方式禁用它们
$scope.images.push($scope.images.shift())应将第一项置于最后一个位置，$scope.images.unshift($scope.images.pop())应将其撤销。
之后，您可能需要重新调整转换值并重新应用转场

希望有所帮助。

Angular js使滑块具有无限效果

1 个答案: