jquery - 一系列列表项的导航循环

Question

如果你看一下界面顶部，我有 7 个图标。每个图标都有一个相应的标签(使用 <li> )。当我单击“下一步”按钮时，我想显示下一个标签 <li>并隐藏前一个。我需要这个循环发生，这样一旦我们到达最后一个 <li>它循环。

我显然需要与此相反的后退按钮。到目前为止我的代码:

$('#next2').click(function() {
    var nextItem = $('#labels li.select').hide().next('#labels li');
    if (nextItem.length === 0) {
        nextItem = $('#labels li').first();
    }

    nextItem.fadeIn().addClass('select');
    $('#labels li.select').prev().hide();
});

$('#prev2').click(function() {
    var prevItem = $('#labels li.select').hide().prev('#labels li');
    if (prevItem.length === 0) {
        prevItem = $('#labels li').last();
    }

    prevItem.fadeIn().addClass('select');
    $('#labels li.select').next().hide();
});

HTML

<div style="margin-left:8%; margin-bottom:10px;">
    <ul id="labels">
        <li id="label-discover" class="select">Discover </li>
        <li id="label-collaborate">Collaborate </li>
        <li id="label-create">Create </li>
        <li id="label-develop">Develop </li>
        <li id="label-launch">Launch </li>
        <li id="label-maintain">Maintain </li>
        <li id="label-learn">Learn </li>
    </ul>
</div>

CSS

#labels li {
    font-family: 'ArvoBold';
    line-height: 100%;
    font-size: 100%;
    color:#FFF;
    margin-bottom:7px;
    text-align:left;
    display:inline;
    display:none;
    text-transform:capitalize;
}

#labels li.deselect {
    display:none;
}

#labels li.select {
    display:inline;
}

Answer 1

不确定这是否是您想要的，但我很快就完成了:

预览:JSFiddle

$(document).ready(function() {
    var total= $('#labels').children().length - 1;
    var current = 0;

    $('#prev').click(function(e) {
        /* Stop page refreshing on anchor click */
        e.preventDefault();

        $('#labels').children().eq(current).hide();

        if(current === 0)
            current = total;
        else
            current--;

        $('#labels').children().eq(current).show();

    });

    $('#next').click(function(e) {
        /* Stop page refreshing on anchor click */
        e.preventDefault();

        $('#labels').children().eq(current).hide();

        if(current === total)
            current = 0;
        else
            current++;

        $('#labels').children().eq(current).show();

    });
});​​