Question

我正在尝试使用多个图像执行滑块，并且代码可以向右移动，但是向左移动ng-move类将应用于数组中的所有元素，这是不可取的。

我的控制器：

$scope.slides = [
{image: 'http://lorempixel.com/121/75/transport/', number: 1},
{image: 'http://lorempixel.com/131/75/transport/', number: 2},
{image: 'http://lorempixel.com/122/75/transport/', number: 3}
];

$scope.slide = function(dir){

            var vehArr = $scope.slides,
                vehicle = {};
            if (dir === 'left') {
              vehicle = vehArr.splice(0,1);
            //  vehicle = vehArr.shift();
                vehArr.push(vehicle);
            } else {
                vehicle = vehArr.pop();
                vehArr.unshift(vehicle);
            }
}

我的css：

.slider {
  width: 100%;
  height: 100px;
  overflow: hidden;
}

.slide {
  float: left;
  height: 100px;
}

.slide.ng-move, .slide.ng-enter, .slide.ng-leave {
  -webkit-transition: 1s ease all; 
  transition: 1s ease all; 
}

.slide.ng-move,
.slide.ng-enter, 
.slide.ng-leave.ng-leave-active{
  margin-left: -150px;
}
.slide.ng-enter, 
.slide.ng-leave,
.slide.ng-move.ng-move-active {
  margin-left: 0px;
}

我的Html：

<div ng-controller="sliderCtrl">

  <div class="slider">
    <div class="slide slide-animation" ng-repeat="slide in slides">
      <img ng-src="{{slide.image}}" alt=""> <br>
      {{slide.number}}
    </div>
  </div>
  <a href ng-click="slide('left')">Left</a>
  <a href ng-click="slide('right')">Right</a>

</div>

http://plnkr.co/edit/rJfOH9zxJLGf4rKPJtS4?p=preview

任何意见或不同的做法都会有所帮助

Answer 1

您的代码存在问题，但只是向左滑动时。基本上，您无需删除即可添加。

我得到第一个数组项并将其存储在变量中，我将其从数组中删除，然后将其添加到数组的末尾。

有代码：

if (dir === 'left') {
    first_item = vehArr[0];
    vehArr.shift();
    vehArr.push(first_item);

} else {
    vehicle = vehArr.pop();
    vehArr.unshift(vehicle);
}

带有ng-repeat和ng-move的AngularJS滑块

1 个答案: