0

私はこれに対するクリーンな解決策を考え出すのに苦労しています：

  • カルーセルには7つのアイテムがあるため、0〜6です。
  • インデックス3は真ん中のものです
  • たとえば、2番目のアイテム（インデックス1）がクリックされた場合、各アイテムは2桁右に移動する必要があります。最後のアイテムがクリックされた場合（インデックス6）、左に3か所移動する必要があります。
function centerCarouselOn（index、callback）{
  var items = $（'li'、カルーセル）;
  var middleIdx = Math.floor（items.length / 2）;
  var direction = null;
  var iterCount = 0;

  if（index === middleIdx）return;

  if（index> 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

これにはアニメーションのコードは含まれていません。また、carousel要素がsの親<ul>であると想定してい<li>ます。

'move'ごとにそれぞれのインデックスを変更する必要はありません。<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);
}
于 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;

  if（direction ==='right'）{
    nextIter =（（k + iterCount）>（numItems-1））？（（k + iterCount）-numItems）：（k + iterCount）;
  }
  そうしないと {
    nextIter =（k --iterCount）> = 0？（k --iterCount）：numItems-（iterCount --k）;
  }

  _animateTo（li、nextIter、direction）;
}）;
于 2012-11-14T16:36:02.003 に答える