1

複数の画像でスライダーを実行しようとしていますが、コードは右に移動しますが、左に移動すると、配列内のすべての要素に 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

任意の意見またはそれを行う別の方法が役に立ちます

4

1 に答える 1

0

コードに問題がありますが、左にスライドするだけです。基本的に、削除せずに追加しています。

最初の配列項目を取得して変数に格納し、配列から削除してから配列の最後に追加します。

コードがあります：

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

} else {
    vehicle = vehArr.pop();
    vehArr.unshift(vehicle);
}
于 2014-10-17T14:59:08.707 に答える