如何讓我的滑塊繼續其循環？

我有一個滑塊從列表中建立ul包含15 li。如何讓我的滑塊繼續其循環？

我將每個5元素顯示爲一個組。在和如果你點擊下一個或上一個按鈕，它會慢慢移動到下一個五個元素，但第三次點擊後（當你點擊第四次前一個時），它沒有顯示任何元素。我知道這很正常，因爲我使用right: "+=855"來移動元素，所以在三次移動後15個元素將會結束。

我想要這個循環繼續（第四次點擊我想顯示元素1-5的元素）。

此鏈接會顯示我的意思： http://jsfiddle.net/mpx83tpv/1/

有沒有除了animate功能，我可以添加到實現這一目標？

來源

2014-09-26 Basel Shbeb

如果我理解正確，您希望滑塊環繞第一個元素，就像一個環。從你連接到的小提琴，似乎這是不可能與你的代碼。但是，如果您更改代碼以顯示特定幻燈片，則可以將其調整爲在最後一個幻燈片後面顯示第一個幻燈片，並使用'if'語句確保數字回到零而不是溢出。 – mechalynx 2014-09-26 20:17:36

無則沒有添加動畫，可以做這樣的事情，但你總是可以使用.prepend()或.append()，如：

$("ul.slider").animate({ 
    right: "+=855" 
}, 1000, function(){ 
    $("ul.slider").css('right', '0'); 
    $('ul.slider li:not(:nth-child(n+6))').appendTo('ul.slider'); 
});

Fiddle

來源

2014-09-26 20:15:00

我想感謝你它的魅力。但我希望你向我解釋'n'請'n'代表什麼？ – 2014-09-26 20:28:14

@BaselShbeb如果你在'第n個孩子（n + 6）'中討論'n'，那就是第n個孩子的標準語法 – 2014-09-26 20:32:51

只是洗牌<li> s到結束滾動後：

$(".prev_button").click(function() { 
    $("ul.slider").animate({ 
     right: "+=855" 
    }, 5000, function() { 
     $("ul.slider").append($("ul.slider li:lt(5)")) 
      .css("right", "-=855"); 
    }); 
});

http://jsfiddle.net/mpx83tpv/9/

來源

2014-09-26 20:26:56

如何讓我的滑塊繼續其循環？

回答

相關問題