Попытка создать повторяющуюся горизонтальную прокрутку div с помощью AngularJS - PullRequest
Новая
       15

Попытка создать повторяющуюся горизонтальную прокрутку div с помощью AngularJS

0 голосов
/ 21 декабря 2018

Я пытаюсь построить (или найти) вращающийся пример div с AngularJS, где у меня есть x элементов на ng-repeat.Я хочу показать 3 <div> за раз, при этом автоматически прокручивая по горизонтали 1 <div> за раз непрерывно, а затем повторяя цикл.

Так, например:

У меня есть 8 объектов в массиве, и данные каждого объекта заполнят <div>.При инициализации моей страницы я хочу показать <div1>, <div2> и <div3>.Затем через 30 секунд я хочу показать <div2>, <div3> и <div4> ... полностью, пока не доберусь до <div6>, <div7> и <div8>.Затем, через следующие 30 секунд, я хочу начать с начала и показать <div7>, <div8>, <div1> и т. Д.

В конечном счете, я хотел бы добавить анимацию для анимации прокрутки / скольжения.эффект, когда <div> меняет положение, но это не обязательно.

enter image description here

1 Ответ

0 голосов
/ 21 декабря 2018

Вы увидите 4 деления в любое время ... последовательность будет идти вперед, и каждый "следующий делитель" заменит "первое деление", которое появляется на экране через 2 секунды ... нажмите кнопку запуска, чтобы начатьцикл ... вы также можете изменить продолжительность до 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>
...