0

私のページには、一度に3つのdivを表示するセクションがありますが、追加のdivが非表示になっている場合があります。

「詳細」ボタンをクリックすると、次の3つのdivがフェードインし、前のdivがフェードアウトします。

したがって、6つのdivがある場合、最初の3つが表示され、[その他]ボタンをクリックすると、div 4〜6が表示されます。

可能であれば、3つのdivを常に表示する必要があります。

たとえば、5つのdivがある場合、[その他]ボタンをクリックすると、div 3〜5が表示されます。

これを実行できるjCarouselというjqueryプラグインがあることは知っていますが、レスポンシブWebサイトを構築していて、カルーセルプラグインが固定サイズのDIVを使用しているため、プラグインなしで可能かどうか疑問に思っています。

編集：HTML：

<a class="more" href="#">More</a>

<div id="container">
    <div class="item"><div>One</div><div>some more text</div></div>
    <div class="item"><div>Two</div><div>some more text</div></div>
    <div class="item"><div>Three</div><div>some more text</div></div>
    <div class="item"><div>Four</div><div>some more text</div></div>
    <div class="item"><div>Five</div><div>some more text</div></div>
    <div class="item"><div>Six</div><div>some more text</div></div>

</div>

Javascript：

$("#container .item").slice(0,3).show();

$(".more").click(function(event) { 
  var $currElements = $("#container .item:visible");
  var $nextElements = $("#container .item:hidden");


    $currElements.hide();
    $nextElements.show();

    event.preventDefault();

});

これは私が現在持っているものです：http：//jsfiddle.net/Wnp5J/

ボタンをもう一度クリックすると、最初の3つのアイテムに戻ることができるかどうか疑問に思っています。

また、可能であれば、常に3つのアイテムを表示します。

4

2 に答える 2

1

jsFiddle：ページングとトランジション

jsFiddle：ページング（ページは常にいっぱい）

jsFiddle：カルーセル

任意の数の要素に対して機能します。

ページング：

$("#container .item").slice(0,3).show();

$(".more").click(function() {

    var items = $('#container .item:visible').hide().last();

    var nextItems = items.nextAll().slice(0, 3);

    if (nextItems.length === 0) {
        nextItems = $("#container .item").slice(0, 3);
    }

    nextItems.show();
});

トランジション付きのページング：

$("#container .item").slice(0,3).show();

$(".more").click(function() {

    var items = $('#container .item:visible');

    var nextItems = items.last().nextAll().slice(0, 3);

    if (nextItems.length === 0) {
        nextItems = $("#container .item").slice(0, 3);
    }

    items.stop().hide(500, function() {
        nextItems.show(500);
    });
});

ページング（ページは常にいっぱい）：

$("#container .item").slice(0,3).show();

$(".more").click(function() {

    var items = $('#container .item:visible').hide().last();

    var nextItems = items.nextAll().slice(0, 3);

    if (nextItems.length === 1) {
        nextItems = $("#container .item").slice(-3);
    }

    if (nextItems.length === 0) {
        nextItems = $("#container .item").slice(0, 3);
    }

    nextItems.show();
});

カルーセル：

$(function() {

    var container = $('#container');
    var cycle = function() {
        container.find('.item')
            .hide()
            .slice(0, 3)
            .appendTo(container)
            .show();
    }

    $(".more").click(function() {
        cycle();
    });

    cycle();
});
于 2013-01-22T18:42:20.440 に答える
0

私はあなたの要求に少し混乱していることを認めます。ここに1つのアイデアがあります。

$(".more").click(function (event) {
  $("#container .item").slice(3, 99).toggle();
});

http://jsfiddle.net/Wnp5J/4/

于 2013-01-22T18:42:41.570 に答える