<div class="divs">
     <div class="cls1">1</div>
     <div class="cls2">2</div>
     <div class="cls3">3</div>
     <div class="cls4">4</div>
     <div class="cls5">5</div>
     <div class="cls6">6</div>
     <div class="cls7">7</div>
 </div>
 <a id="next">next</a>
 <a id="prev">prev</a>

这是一个非常简单的HTML示例.

This is a very simple HTML example.

使用像这样的简单jQuery代码:

With a simple jQuery code like this one:

$(document).ready(function(){
    $(".divs div").each(function(e) {
        if (e != 0)
            $(this).hide();
    });

    $("#next").click(function(){
        if ($(".divs div:visible").next().length != 0)
            $(".divs div:visible").next().show().prev().hide();
        else {
            $(".divs div:visible").hide();
            $(".divs div:first").show();
        }
        return false;
    });

    $("#prev").click(function(){
        if ($(".divs div:visible").prev().length != 0)
            $(".divs div:visible").prev().show().next().hide();
        else {
            $(".divs div:visible").hide();
            $(".divs div:last").show();
        }
        return false;
    });
});

进一步的解释: 第一个块将隐藏除第一个之外的每个div(e是jQuery每个函数中的一个计数器).

For further explanations: The first block will hide every div except first one (e is a counter in each function of jQuery).

另外两个块处理按钮的单击. 我们正在寻找可见的div，然后单击以显示下一个(请参阅jquery的next()函数或上一个div(jquery的prev()函数).

The two other blocks handle the click on the buttons. We are looking for the visible div and on click we are display next (see next() function of jquery or previous div (prev() function of jquery).

如果没有下一个div(单击下一个按钮)，我们将隐藏可见的div并显示第一个.

If there is no next div (on next button click) we are hiding the visible div and displaying the first one.

此处的在线示例: http://jsfiddle.net/hsJbu/