jquery - 箱子换号？ (jQuery)

Question

我无法理解如何使用 jQuery 来实现。

这是我的 HTML 代码:

<div id="contentbox1" class="contentbox">content 1</div>
<div id="contentbox2" class="contentbox" style="display: none;">content 2</div>
<div id="contentbox3" class="contentbox" style="display: none;">content 3</div>
<div id="contentbox4" class="contentbox" style="display: none;">content 4</div>
<div id="contentbox5" class="contentbox" style="display: none;">content 5</div>
<hr />
<div id="pager" class="pager"> <span id="actualpage">1</span>/5</div>

CSS:

div.contentbox {
    width: 300px;
    height: 300px;
    background: #cccccc;
    float: left;
    display: inline;
}
div.pager {
    cursor: pointer;
}
hr {
    display: block;
    clear: both;
    margin: 10px 0px 10px 0px;
}

我无法理解如何开发它，如果我单击 #pager 以查看下一个框并更改 #actualpage 中的第一个数字。 jQuery函数有可能吗？

我尝试了很多方法，但都没有成功。这是我的JSFIDDLE .

Answer 1

我已经更新了你的 fiddle ，它现在像一个圆形旋转木马一样工作。看看这是否有帮助，并询问您是否需要更改任何内容。

演示 JSFiddle

$("#pager").on("click", function () {
    var len = $('.contentbox').length;
    var cur = +($('#actualpage').text());
    if (cur === len) cur = 0;
    $('#actualpage').text(cur+1);
    $('.contentbox').hide();
    $('#contentbox' + (cur+1)).show();
});