Question

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

真的，我只想循环一下DIVS - hide＆amp;显示每个与jsFiddle相同的效果。

我知道很多方法可以让函数循环，但我知道有一种更简单的方法，就是为每个步骤和按钮添加类，各个函数。

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

http://jsfiddle.net/QWQYS/

Answer 1

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

编辑你的小提琴，以便下一个按钮有效。如果您也想让我按上一个按钮，请告诉我。它只是看到哪个面板可见，隐藏它然后显示代码中的下一个面板。

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

Answer 2

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

NEXT按钮跟踪它所在的面板（并设置初始面板），允许无限制的面板更改。为PREV做同样的事情应该相当简单（当然，你必须在一个地方跟踪当前的面板）。

Answer 3

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

<强> 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。

Demo

Answer 4

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

拿到@Explosion Pills并且当你在3号时它就这样做了，当你下次击中时它会回到第1个。

通过Prev＆amp ;;旋转通过DIV下一个按钮

4 个答案: