Предыдущая Следующая с JQuery

Question

Мне нужно просмотреть элементы с помощью кнопок «предыдущий» и «следующий», но я не могу понять, как это сделать.Вы можете помочь.Предыдущая / следующая также должна непрерывно повторяться, т.е.когда вы добираетесь до последнего предмета, он переходит к первому, а когда вы добираетесь до первого предмета через предыдущий, следующий щелчок приведет вас к последнему предмету и т. д.

<ul>
<li>Number 1 item</li>
<li>Number 2 item</li>
<li>Number 3 item</li>
<li>Number 4 item</li>
</ul>

Большое спасибо, C

Answer 1

Это должно помочь вам начать: скрипка

Html:

<ul>
  <li>Number 1 item</li>
  <li>Number 2 item</li>
  <li>Number 3 item</li>
  <li>Number 4 item</li>
</ul>
<input type="button" class="next" value=">" />
<input type="button" class="prev" value="<" />

Javascript:

(function(){
    var $lis = $('ul li');
    var index = 0, lastIndex = 0;

    start(); // activate first, add event listeners to buttons

    function next(){
        lastIndex = index;
        if(++index == $lis.length) index = 0; // if next is out of bounds go to first
        $lis.eq(index).addClass('active');
        $lis.eq(lastIndex).removeClass('active');
    };

    function prev(){
        lastIndex = index;
        if(--index < 0) index = ($lis.length - 1); // if prev is less than first to to last
        $lis.eq(index).addClass('active');
        $lis.eq(lastIndex).removeClass('active');
    };
    function start(){
        $lis.eq(0).addClass('active');
        $('.next').click(next);
        $('.prev').click(prev);
    }
})();

Answer 2

Вот еще один пример, который вы можете использовать - опубликовано на jsFiddle