多幻燈片旋轉木馬

Question

嗨，大家好，我需要一些幫助來擴展多幻燈片JS旋轉木馬的功能。

• 用戶點擊下一個按鈕，然後項目＃1被隱藏，項目2,3,4,5,6應該顯示。
• 用戶再次點擊下一步，然後項目＃1和2有隱藏和3,4,5,6,7應該顯示
• 應該隱藏在最後一個項目的按鈕
• 逆的上一個按鈕的情況。

這是我到目前爲止有：

$('ul li:gt(4)').hide(); 

$('.prev').click(function() { 
    var first = $('ul').children('li:visible:first'); 
    first.prevAll(':lt(5)').show(); 
    first.prev().nextAll().hide(); 
}); 

$('.next').click(function() { 
    var last = $('ul').children('li:visible:last'); 
    last.nextAll(':lt(5)').show(); 
    last.next().prevAll().hide(); 
}); 

這裏是我的HTML：

<ul> 
    <li>1</li> 
    <li>2</li> 
    <li>3</li> 
    <li>4</li> 
    <li>5</li> 
    <li>6</li> 
    <li>7</li> 
    <li>8</li> 
    <li>9</li> 
    <li>10</li> 
    <li>11</li> 
    <li>12</li> 
    <li>13</li> 
    <li>14</li> 
    <li>15</li> 
    <li>16</li> 
    <li>17</li> 
    <li>18</li> 
    <li>19</li> 
    <li>20</li> 
    <li>21</li> 
</ul> 
<a class="prev">prev</a> | <a class="next">next</a> 

一個JavaScript小提琴可以在http://jsfiddle.net/90faL0c1

Answer 1

在這裏你去：

http://jsfiddle.net/90faL0c1/1/

更改功能，這些隱藏和顯示相應的號碼：

$('.prev').click(function() { 
    var first = $('ul').children('li:visible:first'), 
    last = $('ul').children('li:visible:last'); 

    if(first.prev().length > 0){ 
     last.hide(); 
     first.prev().show(); 
    } 


}); 

$('.next').click(function() { 
    var first = $('ul').children('li:visible:first'), 
    last = $('ul').children('li:visible:last'); 

    if(last.next().length > 0){ 
     first.hide(); 
     last.next().show(); 
    } 

}); 

Answer 2

找到你可以試試這個代碼 取代上一個功能

var first = $('ul').children('li:visible:first'); 

到

var first = $('ul').children('li:visible:last'); 

，並在接下來的功能替代

var last = $('ul').children('li:visible:last'); 

到

var last = $('ul').children('li:visible:first');