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

Question

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

例如：

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

最后，我想添加一些动画，以便在 <div> 改变位置时为滚动/滑动效果设置动画，但这不是强制性的。

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>