尝试使用AngularJS创建重复的水平div滚动

Question

我正在尝试使用AngularJS构建（或找到）旋转div示例，其中在ng-repeat上有x个项目。我想一次显示3 <div>，同时让它连续一次自动水平滚动1 <div>，然后在循环中重复。

例如：

我在一个数组中有8个对象，每个对象的数据将填充<div>。在初始化页面时，我想显示<div1>，<div2>和<div3>。然后，在30秒之后，我想一直显示<div2>，<div3>和<div4> ...直到到达<div6>，<div7>和{{ 1}}。然后在接下来的30秒之后，我要从头开始，显示<div8>，<div7>和<div8>等。

最终，我想在<div1>更改位置时添加一些动画来为滚动/滑动效果设置动画，但这不是强制性的。

Answer 1

您将随时看到4个div ...序列将向前移动，每个“下一个div”将替换2秒钟后屏幕上显示的“第一个div” ...按开始按钮开始循环...您还可以在下面的代码中将持续时间更改为30秒。

var app = angular.module('myApp', []);
/* 4 falses allowed only */
app.controller('myCtrl', function($scope, $interval) {
  $scope.divVals = [{
      val: "item 0",
      effectiveIndex: 0,
      hide: true
    },
    {
      val: "item 1",
      effectiveIndex: 0,
      hide: true
    },
    {
      val: "item 2",
      effectiveIndex: 0,
      hide: true
    },
    {
      val: "item 3",
      effectiveIndex: 0,
      hide: true
    },
    {
      val: "item 4",
      effectiveIndex: 0,
      hide: true
    },
    {
      val: "item 5",
      effectiveIndex: 0,
      hide: true
    },
    {
      val: "item 6",
      effectiveIndex: 1,
      hide: false
    },
    {
      val: "item 7",
      effectiveIndex: 2,
      hide: false
    },
    {
      val: "item 8",
      effectiveIndex: 3,
      hide: false
    },
    {
      val: "item 9",
      effectiveIndex: 4,
      hide: false
    }
  ];
  $scope.checkVal = function() {
    console.log(name);
  }

  $scope.next4divs = function() {
    var counterFOUR = 0;
    for (var i = 0; i < $scope.divVals.length; i++) {

      if (i == 9 && $scope.divVals[i].hide == true && $scope.divVals[0].hide == false && counterFOUR < 4) {
        $scope.divVals[0].hide = true;
        $scope.divVals[4].hide = false;
        $scope.setEffectiveIndex(1);
        break;
      } else if ($scope.divVals[i].hide == true && $scope.divVals[i + 1].hide == false && counterFOUR < 4) {
        if (i > 5) {
          counterFOUR++;
          var indexNum = i + 1;
          var turnTrue = i - 5;

          $scope.divVals[indexNum].hide = true;
          $scope.divVals[turnTrue].hide = false;
          $scope.setEffectiveIndex(indexNum + 1);
          break;
        } else {
          counterFOUR++;
          var turnFalse = i + ($scope.divVals.length - 4);
          var indexNum = i + 1;
          if (turnFalse > 10) {
            turnFalse = turnFalse - 10;
          }

          $scope.divVals[indexNum].hide = true;
          $scope.divVals[turnFalse - 1].hide = false;
          $scope.setEffectiveIndex(indexNum + 1);
          break;
        }
      }

    }
  }

  $scope.setEffectiveIndex = function(passedIndex) {
    if (passedIndex < 10) {
      $scope.divVals[passedIndex].effectiveIndex = 1;
    } else if (passedIndex >= 10) {
      $scope.divVals[passedIndex - 10].effectiveIndex = 1;
    }

    if (passedIndex + 1 < 10) {
      $scope.divVals[passedIndex + 1].effectiveIndex = 2;
    } else if (passedIndex + 1 >= 10) {
      $scope.divVals[passedIndex + 1 - 10].effectiveIndex = 2;
    }

    if (passedIndex + 2 < 10) {
      $scope.divVals[passedIndex + 2].effectiveIndex = 3;
    } else if (passedIndex + 2 >= 10) {
      $scope.divVals[passedIndex + 2 - 10].effectiveIndex = 3;
    }

    if (passedIndex + 3 < 10) {
      $scope.divVals[passedIndex + 3].effectiveIndex = 4;
    } else if (passedIndex + 3 >= 10) {
      $scope.divVals[passedIndex + 3 - 10].effectiveIndex = 4;
    }
  }

  $scope.visibilityFunction = function() {
    $interval(() => {
      $scope.next4divs()
    }, 2000);
  }


});

.box {
  height: 100px;
  width: 100px;
  background: lightblue;
  float: left;
  text-align: center;
  padding-top: 50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>


<div ng-app="myApp" ng-controller="myCtrl">
  <button type="button" ng-click="visibilityFunction('start')">Start</button>
  <hr/>
  <div class='containingDiv'>
    <div ng-repeat="item in divVals | filter: item.hide==true | orderBy: 'effectiveIndex'">
      <div class='box'>{{item.val}} <br/> {{item.effectiveIndex}}</div>
    </div>
  </div>



</div>