Question

我的页面上有一个部分，一次显示3个div，但可能还有其他div隐藏。

点击“更多”按钮，接下来的3个div将淡入，之前的div将淡出。

因此，如果我们有6个div，则会显示前3个div，单击More按钮，将显示div 4-6。

如果可能，应始终显示3个div。

例如，如果我们有5个div，那么当你点击More按钮时，会显示div 3-5。

我知道有一个名为jCarousel的jquery插件可以做到这一点，但只是想知道是否有可能没有插件，因为我正在构建一个响应式网站，而carousel插件使用固定大小的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个项目。

Answer 1

jsFiddle：Paging＆amp; transitions

jsFiddle：Paging（页面总是满的）

jsFiddle：Carousel

适用于任意数量的元素。

<强>寻呼：

$("#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();
});

Answer 2

我承认我对你的请求感到有点困惑。这是一个想法。

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

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

一次显示或循环3个div

2 个答案: