清洁数学解决方案以迭代循环轮播

Question

我正在努力为此想出一个干净的解决方案：

• 轮播有 7 个项目，所以 0 - 6。
• 索引 3 是中间的索引
• 例如，如果单击第二个项目（索引 1），则每个项目需要向右移动 2 个位置。如果单击最后一项（索引 6），则需要向左移动 3 个位置。

function centerCarouselOn(index, callback) {
  var items = $('li', carousel);
  var middleIdx = Math.floor(items.length / 2);
  变种方向=空；
  var iterCount = 0;

  if(index === middleIdx) 返回；

  如果（索引> middleIdx）{
    方向='左';
    iterCount = (index - middleIdx);
  }
  别的 {
    方向='右';
    iterCount = (middleIdx - 索引);
  }

  $('li', 轮播).each(function(k, v) {
    var li = $(v);

    // 这里我需要向左或向右迭代n个地方
    // 例如：
    // 方向 = 左，iterCount = 3
    // 然后每个 li 按索引将需要这个序列：
    // 0: 6, 5, 4
    // 1: 0, 6, 5
    // 2: 1, 0, 6
    // 3: 2, 1, 0
    // 4: 3, 2, 1
    // 5: 4, 3, 1
    // 6: 5, 4, 3（这个移动到中心 - 索引 3）
  });

}

Answer 1

这不包括任何动画代码，它还假设carousel 元素是<li>s 的父<ul>。

应该没有必要为每个“移动”更改每个 <li> 的索引。您真正需要做的就是将最后一个元素移动到第一个位置，或者将第一个元素移动到最后一个位置（取决于您移动的方向）。我还添加了一个 1 秒的 timeout，因此您应该能够看到它逐步完成。

function centerCarouselOn(index, callback) {
  var items = $('li', carousel);
  var middleIdx = Math.floor(items.length / 2);
  var direction = null;
  var iterCount = 0;

  if(index === middleIdx) return;

  // if iterCount is positive, we are going right; else, we are going left
  iterCount = middleIdx - index;

  // this funciton gets called recursively until all moves are complete
  function moveCarousel() {
    if (iterCount===0) return;

    if (iterCount > 0) {
      // take the last element, prepend it to the carousel
      $('li', carousel).last().prependTo(carousel);
      iterCount--;
    } else if (iterCount < 0) {
      // take the first element, append it to the carousel
      $('li', carousel).first().appendTo(carousel);
      iterCount++;
    }

    // execute callback to apply css changes at each step
    callback();

    // set a delay, then repeat.
    window.setTimeout(moveCarousel, 1000);
  }

  // start moving the carousel
  moveCarousel(iterCount);
}

Answer 2

感谢大家的关注，我最后是这样的：

function centerCarouselOn(index, callback) {
  var items = $('li', carousel);
  var numItems = carousel.children().length;
  var middleIdx = Math.floor(items.length / 2);
  var direction = null;
  var iterCount = 0;

  if(index === middleIdx) return;

  if(index > middleIdx) {
    direction = 'left';
    iterCount = (index - middleIdx);
  }
  else {
    direction = 'right';
    iterCount = (middleIdx - index);
  }

  $('li', carousel).each(function(k, v) {
    var li = $(v);

    // Here I need to iterate n places to the left or right
    // e.g:
    // direction = left, iterCount = 3
    // Then each li by index would need this sequence:
    // 0: 6, 5, 4
    // 1: 0, 6, 5
    // 2: 1, 0, 6
    // 3: 2, 1, 0
    // 4: 3, 2, 1
    // 5: 4, 3, 1
    // 6: 5, 4, 3 (this one moves to center - index 3)

    if(direction === 'right') {
      for(var i = k; i < (k + iterCount); i++) {
        var thisIter = i;
        var nextIter = (++thisIter >= numItems) ? (thisIter - numItems) : thisIter;

        console.log(k + ': ' + nextIter);

      }
    }
    else {
      for(var i = k; i > (k - iterCount); i--) {
        var thisIter = i;
        var nextIter = (--thisIter < 0) ? (numItems + thisIter) : thisIter;

        console.log(k + ': ' + nextIter);
      }
    }
  });
}

原来动画看起来像这样很垃圾，所以我只是在计算最终位置（作为奖励，它更有效）：

$('li', carousel).each(function(k, v) {
  var li = $(v);

  var nextIdx = 0;

  如果（方向==='对'）{
    nextIter = ((k + iterCount) > (numItems - 1)) ？ ((k + iterCount) - numItems) : (k + iterCount);
  }
  别的 {
    nextIter = (k - iterCount) >= 0 ？ (k - iterCount) : numItems - (iterCount - k);
  }

  _animateTo(li, nextIter, 方向);
});