使用next/prev按鈕的簡單內容交換器

Question

我的頁面上有一個列表，其中每個li代表不同的內容塊。

我只想要一個可見的塊。 「可見」類的li是要顯示的類。

當我點擊下一個按鈕時，我想讓可見類移動到下一個li。與上一個按鈕相同。

當我們到達最後，我希望它從頭開始重新開始。如果你在第一個上面點擊「上一個」，它也應該是最後一個。

Iam從jquery開始，所以我需要幫助！

HTML結構

<ul class="container"> 
    <li>item1</li> 
    <li>item 2</li> 
    <li>item 3</li> 
</ul> 
<button type="button" class="prev">prev</button> 
<button type="button" class="next">next</button> 

CSS

.container li { display:none; } 
.container li.visible { display:block; } 

JS

$(document).ready(function() { 
    $('.container li:first-child').addClass('visible'); 
}); 

var numberOfItems = $('.container li').size(); 

$('.next').click(function(){ 
    $('.container').find('.visible').removeClass('visible').next().addClass('visible'); 
}); 

$('.prev').click(function(){ 
    $('.container').find('.visible').removeClass('visible').prev().addClass('visible'); 
}); 

我卡住了！我覺得這段代碼不太好，我需要'循環'功能。誰能幫忙？

Answer 1

看看這個How to swap visible list item using next and previous buttons?鏈接，這將幫助您獲得所需的答案。當你點擊下一個按鈕時，可見類將移動到下一個點，這與前一個按鈕相同。如果達到最後，它將從頭開始，類似於Prev按鈕。
//對於接下來

if (index == (length - 1)) { 
      $('li').first().removeClass('invisible').addClass('visible'); 
     } 

//對於上一個

if (index == 0) { 
     $('li').last().removeClass('invisible').addClass('visible'); 
    } 

我希望你這樣會更多。祝一切順利。