清洁数学的解决方案来遍历圆形转盘

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 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) 
    }); 

}

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; 

    if(direction === 'right') { 
    nextIter = ((k + iterCount) > (numItems - 1)) ? ((k + iterCount) - numItems) : (k + iterCount); 
    } 
    else { 
    nextIter = (k - iterCount) >= 0 ? (k - iterCount) : numItems - (iterCount - k); 
    } 

    _animateTo(li, nextIter, direction); 
});