Question

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

列表不应该是循环的，表示列表中的最后一项之后不得有第一项。

创造了小提琴，但它以循环方式穿越。我正在使用这个遍历列表，

$("#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();

Answer 2

你应该跟踪你当前的情况。比如下面的代码。

var items_count = $("#itemsListBox ul li").length, current_item_counter=0;

$("#rightArrow").click(function(e) {
    if(current_item_counter<items_count)
    {
        var curr =  $("#itemsListBox ul li:last");
        curr.parent().prepend(curr);
        current_item_counter++;
    }
});
$("#leftArrow").click(function(e) {
    if(current_item_counter> 0)
    {
        var curr =  $("#itemsListBox ul li:first");
        curr.parent().append(curr);
        current_item_counter--;
    }
});

这里是jsFiddle。

左右动画ui ul - 不是圆形

2 个答案: