javascript - 向左和向右动画 ui ul - 不是圆形

Question

想要一次显示来自 ul 的 3 个元素。当用户点击下一个箭头时，每个元素都会被遍历，当控制到达最后一项，即第三项时，应该显示接下来的三项，而不是前三项。

列表不应该是循环的，意味着在列表中的最后一项之后不能有第一项。

已创建 fiddle ，但它以循环方式遍历。 我正在使用它遍历列表，

$("#rightArrow").click(function (e) {
    var curr = $("#itemsListBox ul li:last");
    curr.parent().prepend(curr);
});
$("#leftArrow").click(function (e) {
    var curr = $("#itemsListBox ul li:first");
    curr.parent().append(curr);
});

http://jsfiddle.net/N6XrL/

Answer 1

您可以简单地隐藏和显示适当的元素，而不是附加/前置:

http://jsfiddle.net/N6XrL/2/

var $elements = $("#itemsListBox ul li");
var count = $elements.length;
var showNum = 3;
var counter = 0;

$("#rightArrow").click(function (e) {
    if (counter + showNum < count) {
        counter++;
    }
    display();
});

$("#leftArrow").click(function (e) {
    if (counter > 0) {
        counter--;
    }
    display();
});

function display() {
    $elements.hide();    
    $elements.slice(counter, counter + showNum).show();
}

display();