0

我的页面上有一个部分是一次显示 3 个 div，尽管可能隐藏了其他 div。

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

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

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

例如，如果我们有 5 个 div，那么当您单击“更多”按钮时，会显示 3-5 个 div。

我知道有一个名为 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 个项目。

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

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

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

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

于 2013-01-22T18:42:41.570 回答