2

我想创建一个函数，通过点击“下一步”按钮来循环遍历 3 个 DIV 块，该按钮将在面板的 1、2 和 3 之间连续旋转。点击“Prev”按钮将返回上一个 DIV 面板。

真的，我只想循环浏览几个 DIVS 面板 - 隐藏和显示它们中的每一个，效果与 jsFiddle 相同。

我知道很多让函数循环执行的肮脏方法，但我知道有一种更简单的方法，而不是为每个步骤和按钮添加类、单独的函数。

这是我的jsFiddle。单击下一个按钮，您将看到我希望如何循环“面板”。

http://jsfiddle.net/QWQYS/

4

4 回答 4

2

http://jsfiddle.net/QWQYS/4/

编辑了您的小提琴，以便下一个按钮起作用。如果您也希望我执行上一个按钮，请告诉我。它只是查看可见的面板，将其隐藏，然后在代码中显示下一个面板。

编辑：也添加了上一个按钮功能。

于 2012-06-28T20:13:59.150 回答
1

http://jsfiddle.net/QWQYS/1/

NEXT 按钮跟踪它所在的面板（并设置初始面板），允许无限制地更改面板。对 PREV 执行相同操作应该相当简单（当然，您必须在一个位置跟踪当前面板）。

于 2012-06-28T20:11:07.477 回答
1

如果在我的滑块中使用类似的结构，

JS

var active = 0;
$('.btn').click(function() {
    var $btn = $(this);
    var $box = $('#area-wrap').find('.box'); 
    $box.eq(active).slideUp(function() {
        if ($btn.hasClass('next')) {
            if (active == $box.length - 1) {
                active = 0;
            }
            else {
                active ++;
            }
        }
        else {
            if (active == 0) {
                active = $box.length - 1;
            }
            else {
                active --;
            }
        } 
        $box.eq(active).delay(500).slideDown();
    });

});​

标记：

<div id="area-wrap">

    <!-- First Panel (Start) -->
    <div class='box'>
    <div class="left-panel1">1st Panels</div>
    <div class="right-panel1">1st Panels</div>
    </div>
    <!-- Second Panel (Hidden) -->
    <div class='box hidden'>
        <div class="left-panel2">2nd Panels</div>
        <div class="right-panel2">2nd Panels</div>
    </div>
    <!-- Third Panel (Hidden) -->
    <div class='box hidden'>
    <div class="left-panel3" >3rd Panels</div>
    <div class="right-panel3">3rd Panels</div>
    </div>
    <div style="clear:both"></div>

    <div class="btn next">NEXT</div>
    <div class="btn prev">PREV</div>

</div>​

并添加

.hidden{
display:none;
}

到 CSS。

演示

于 2012-06-28T21:01:52.267 回答
0

http://jsfiddle.net/QWQYS/1/

服用@Explosion Pills 并做到了，所以当你在第 3 次时，它会在你下一次击球时回到第 1 次。

于 2012-06-28T20:15:39.053 回答