一次显示或循环3 divs

我的页面上有一段显示3个div的内容，但可能会隐藏其他div。一次显示或循环3 divs

通过点击一个“更多”按钮，接下来的3个div会淡入，而之前的那个会淡出。

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

如果可能的话3个div应该始终显示。

因此，例如，如果我们有5个div，那么当您单击More按钮时，将显示div 3-5。

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

来源

2013-01-22 Anthony

是的，这是可能的。祝你好运！ – Blazemonger

当然，所有插件都是由其他人编写的代码，以使其他人的生活更轻松。 –

我要求一个非插件解决方案的唯一原因是因为我在一个响应式网站上使用它，而jCarousel插件为我的每个div添加了固定宽度。 – Anthony

的jsfiddle：Paging & 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(); 
});

寻呼W /转换：

$("#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-22 18:42:20

谢谢克里斯托弗。我喜欢你的寻呼解决方案。你知道是否有可能总是显示3？ – Anthony

如果您要分页，则一次显示3个项目，前提是您的总数为3个项目的倍数。又名：[[1,2,3]，[4,5,6]]。如果你有3的非倍数，你最终会得到类似[[1,2,3]，[4,5]]的东西。你想要不同的东西吗？又名：[[1,2,3]，[3,4,5]]（分页，页面总是满）或[[1,2,3]，[4,5,1]]（旋转木马）？ –

这两种解决方案看起来都可以工作。旋转木马可能有更好的优势。 – Anthony

我承认我有点被你的要求混为一谈。这是一个想法。

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

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

来源

2013-01-22 18:42:41 isherwood

一次显示或循环3 divs

回答

相关问题