一次顯示或循環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

回答

相關問題