2

パネルの 1、2、および 3 の間で連続して回転する「次へ」ボタンを押すことで、DIV の 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

スライダーで同様の構造を使用する場合、

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 に答える
1

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

NEXT ボタンは、それがどのパネル上にあるかを追跡 (および最初のパネルを設定) し、無制限のパネル変更を可能にします。PREV についても同じことを行うのはかなり簡単なはずです (もちろん、現在のパネルを 1 つの場所で追跡する必要があります)。

于 2012-06-28T20:11:07.477 に答える
0

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

@Explosion Pills を取り、3 番目にいるときに次にヒットすると 1 番目に戻るようにしました。

于 2012-06-28T20:15:39.053 に答える