Question

更新：我更改了我的代码（基于此示例... http://www.script-tutorials.com/photo-gallery-with-angularjs-and-css3/），现在正在向右滑动，但向左滑动不会

我为图片库创建了一个控制器，并设法在单击缩略图时更改主图像。我希望当使用ng-swipe-left滑动时，主图像也会更改为下一个thumdnail图像。主图像将滑出视图，但新图像不会显示。这是我的控制器...

controller('blogpageCtrl', ['$scope','$routeParams','$http',
function($scope, $routeParams, $http){
  $http.get('views/pages/' + $routeParams.articleId + '.json').success(function(data){
    $scope.article = data;

  //$scope.setImage = function(imageUrl){
  //$scope.mainImageUrl = imageUrl;
  //};
  $scope._Index = 0;

  // if a current image is the same as requested image
  $scope.isActive = function (index) {
    return $scope._Index === index;
  };

  // show prev image
  $scope.showPrev = function () {
    $scope._Index = ($scope._Index > 0) ? --$scope._Index : $scope.data.images.length - 1;
  };

  // show next image
  $scope.showNext = function () {
    $scope._Index = ($scope._Index < $scope.data.images.length - 1) ? ++$scope._Index : 0;
  };

  // show a certain image
  $scope.showPhoto = function (index) {
    $scope._Index = index;
  };

  });
}]);

这是我的HTML ...

 <img ng-repeat="img in article.images" ng-swipe-right="showPrev()" ng-swipe-left="showNext()" ng-show="isActive($index)" ng-src="{{img}}" class="photobg">
<ul class="article-thumbs">
  <li ng-repeat="img in article.images" ng-class="{'active':isActive($index)}">
    <img ng-src="{{img}}" ng-click="showPhoto($index);">
  </li>
</ul>

更新：感谢user814628指引我正确的方向。我通过使用简化代码修改我的控制器来实现它....

  $scope._Index = 0;

  // if a current image is the same as requested image
  $scope.isActive = function (index) {
    return $scope._Index === index;
  };

  // show prev image
  $scope.showPrev = function () {
    $scope._Index = Math.max(0, $scope._Index - 1);
  };

  // show next image
  $scope.showNext = function () {
    $scope._Index = Math.min(3, $scope._Index + 1);
  };

  // show a certain image
  $scope.showPhoto = function (index) {
    $scope._Index = index;
  };

纯Angular js图片库滑动到下一个图像

0 个答案: