我创建了一个简单的照片 slider ，但我不知道如何让它无限大。 我怎样才能用 Angular 方式产生这种效果，请帮忙。 我不想使用 jquery，但如果它是唯一的方法，那么无论如何。
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)"
};
}
});.mt {
margin-top: 2em;
}
.outer {
max-width: 600px;
overflow: hidden;
}
.slider {
width: 90000px;
position: relative;
transition: all 1s;
}
.slider div {
float: left;
}<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>最佳答案
最简单的方法是打乱 $scope.images 数组。
完成转换后，通过创建类似于
.no-transition类并将其添加到 slider 或通过您可以想象的任何其他方式来禁用它们$scope.images.push($scope.images.shift())应该将第一项放到最后一个位置，$scope.images.unshift($scope. images.pop())应该反转它。之后，您可能需要重新调整转换值并重新应用转换
希望对您有所帮助。
关于javascript - Angular js使 slider 具有无限效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28988187/