jQuery無盡滾動循環

Question

我在jsFiddle上有一個項目：

jsFiddle鏈接

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秒鍾就會循環播放一次，因此動畫每15毫秒播放一次。

右邊不會循環，因為既然我不知道該怎么做，我不會浪費時間使它在正確准備好時可以正確地滾動，而錯誤地向右滾動。

我沒有使用插件，因為我想自己學習（固執！）

Answer 1

分叉你的小提琴，並添加了代碼a）消除滾動時的跳動，b）檢查向右滾動（下一個）並將第一個<li>到列表的末尾（如果有空格）

檢查此小提琴： http : //jsfiddle.net/CRy4Q/15/