Question

我需要使用带有前置和下一个按钮的元素，但是我无法解决如何做到这一点。你能帮我吗。 prev / next也应该连续循环，即。当你到达最后一个项目时，它会转到第一个项目，当你通过上一个项目到达第一个项目时，下一个点击将带你到最后一个项目，依此类推。

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

非常感谢， ç

Answer 1

这应该让你开始：fiddle

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

以下是您可以使用的另一个示例 - posted on jsFiddle

上一页下一页使用jquery

2 个答案: