使用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'); 
    } 

我希望你这样会更多。祝一切顺利。