0

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

  • 轮播有 7 个项目，所以 0 - 6。
  • 索引 3 是中间的
  • 例如，如果单击第二个项目（索引 1），则每个项目需要向右移动 2 个位置。如果单击最后一项（索引 6），则需要向左移动 3 个位置。
功能中心CarouselOn（索引，回调）{
  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）
  });

}
4

2 回答 2

1

this does not include any code for animation, and it also assumes that the carousel element is the parent <ul> of the <li>s.

It should be unnecessary to change the indicies of each <li> for every 'move'. All you really need to do is move the last element to the first position, or the first element to the last position (depending on direction you are moving). I also added a timeout of 1 second so you should be able to see it stepping through. 

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);
}
于 2012-11-14T13:34:48.917 回答
0

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

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', 轮播).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, 方向);
});
于 2012-11-14T16:36:02.003 回答