JQuery Бесконечный цикл скроллинг

Question

У меня есть проект по jsFiddle:

jsFiddle Link

JavaScript:

var scroller = function() { 
    $('#holder div').animate({ 
     left: ($t.attr('id') == 'prev' ? '-=' : '+=') + 3 
    }, 10, 'linear', function() { 
     if ($(this).position().left < -$('li:first-child', this).width()) { 
      w = $('li:first-child', this).totalWidth(); 
      $('li:first-child', this).appendTo('ul', this); 
      $(this).css('left', $(this).position().left + w); 
     } 
    }); 
}; 

$.fn.extend({ 
    totalWidth: function() { 
     return this.outerWidth() + parseInt(this.css('margin-left'), 10) + parseInt(this.css('margin-right'), 10); 
    } 
}); 
wdth = 0; 
$('#marquee ul li').each(function() { 
    wdth += $(this).totalWidth(); 
}); 
$('#holder div').width(wdth); 
var to; 
$('#prev, #next').css('top', ($('#marquee').outerHeight() - $('#prev').outerHeight())/2).live('mousedown mouseup', function(e) { 
    $t = $(this); 
    if (e.type == 'mousedown') { 
     to = setInterval(scroller, 15); 
    } 
    else { 
     clearInterval(to); 
    } 
}); 

HTML:

<div id="marquee"> 
    <div id="prev"><</div> 
    <div id="next">></div> 
    <div id="holder"> 
     <div> 
     <ul> 
      <li>Part 1</li> 
      <li>Part 2</li> 
      <li>Part 3</li> 
      <li>Part 4</li> 
      <li>Part 5</li> 
      <li>Part 6</li> 
      <li>Part 7</li> 
      <li>Part 8</li> 
      <li>Part 9</li> 
      <li>Part 10</li> 
     </ul> 
    </div> 
    </div> 
</div> 

CSS:

* { 
    font-family: verdana; 
    font-size: 12px; 
} 
#marquee { 
    top: 50px; 
    position: relative; 
    width: 80%; 
    height: 34px; 
    background-color: #CCC; 
    margin: 0 auto; 
    padding: 0; 
} 
#holder { 
    overflow: hidden; 
position: absolute; 
    left: 5px; 
    right: 5px; 
    top: 5px; 
    bottom: 5px; 
} 
#holder div { 
    position: absolute; 
} 
#marquee ul li { 
    display: inline-block; 
    float: left; 
    margin-left: 5px; 
    padding: 5px 7px; 
    background-color: #555; 
} 
#marquee ul li:nth-child(2n+1) { 
background-color: #888; 
} 
#marquee ul li:first-child { 
    margin-left: 0; 
} 
#prev, #next { 
    position: absolute; 
    top: 10px; 
    background-color: #66F; 
    padding: 2px; 
    cursor: pointer; 
    z-index: 9002; 
} 
#prev { 
    left: -13px; 
    border-radius: 5px 0 0 5px; 
} 
#next { 
    right : -13px; 
    border-radius: 0 5px 5px 0; 
} 

, что я пытаюсь достичь петля скроллинг на MouseDown, останавливаясь на MouseUp.

Я смог сделать это прокруткой и петлей, но он «прыгает» при каждом изменении цикла.

У кого-нибудь есть идеи?

---

Я отредактировал скрипт, чтобы удалить правило CSS, также слегка отредактировал код.

Первоначально, когда он прокручивался влево, он отскакивал назад примерно на 20 пикселей, и это было сделано, чтобы ухудшить правило CSS!

Также анимация продолжается в 10 мс, но она зацикливается каждые 15 мс из-за того, что на мыши цикл будет продолжаться немного.

Право не зацикливается, потому что, поскольку я не знал, как делать левые, я бы не тратил время на то, чтобы прокрутить его правильно, если бы я мог просто прокручивать его правильно, когда он был готов.

Я не использую плагин, потому что я хочу, чтобы узнать, как сделать это сам (упрямый!)

Answer 1

Раздвоенным вашу скрипку и добавил код а), что устраняет нервозность при прокрутке и б) проверка и добавляет первые <li> к концу списка (если есть место) во время прокрутки вправо (следующий)

Проверить эту скрипку: http://jsfiddle.net/CRy4Q/15/