無限循環div divs一次顯示4個

我想創建類似於幻燈片放映的東西，無論何時單擊按鈕#more-projects 4個div會顯示，再次單擊它時，這些div會隱藏，接下來的4個div會顯示，這需要無限循環並應用於任何數量的div。無限循環div divs一次顯示4個

在這種情況下，我有6個div與012 'div'#container'內，當我點擊#more-projects我想這些div的前4個顯示，div 1,2,3,4。當再次點擊#more-projects時，循環中接下來的4個div將顯示爲5,6,1,2。再次點擊，顯示div 1,2,3,4。我怎樣才能選擇下一個索引，並使函數無限遍歷元素？

<div id="container"> 
    <div class="thumbnail-cnt" data-num="1">1 
    </div> 
    <div class="thumbnail-cnt" data-num="2">2 
    </div> 
    <div class="thumbnail-cnt" data-num="3">3 
    </div> 
    <div class="thumbnail-cnt" data-num="4">4 
    </div> 
    <div class="thumbnail-cnt" data-num="5">5 
    </div> 
    <div class="thumbnail-cnt" data-num="6">6 
    </div> 
</div> 

<button id="more-projects" > Next 
</button>

我的JS到目前爲止

var startIndex = 0; 

$('#more-projects').on("click", function() { 
    var endIndex = startIndex + 4; 
    var nextIndex = endIndex +1; 
    $('#container .thumbnail-cnt').slice(startIndex, endIndex).addClass('visible'); 
    var startIndex = nextIndex; 
}

CSS

來源

2017-08-07 CalAlt

您將如何被確定在屏幕上顯示的divs'的'量？ –

它們將通過CMS輸出 – CalAlt

您使用哪種服務器端語言？這並不是完全重要，但它可以幫助我爲你構建更相關的答案。 –

一個解決方案可以基於：

保存可見的項目爲您的DIV
的數據值的最大數量的初始值開始索引保存爲另一種數據值

因此，初始值是：

<div id="container" data-start-index="0" data-max-visible-length="4">

單擊處理程序計算端IND前位置。如果超過最大值，您需要從頭開始。將此新值保存爲新的起始索引。

$('#more-projects').on("click", function() { 
 
    var startIndex = $('#container').data('startIndex'); 
 
    var maxVisibleLength = $('#container').data('maxVisibleLength'); 
 
    var endIndex = startIndex + maxVisibleLength; 
 
    var itemCounts = $('#container .thumbnail-cnt').length; 
 
    $('#container .thumbnail-cnt.visible').removeClass('visible'); 
 
    if (endIndex > itemCounts) { 
 
     endIndex = endIndex - itemCounts; 
 
     $('#container .thumbnail-cnt').slice(startIndex).addClass('visible'); 
 
     $('#container .thumbnail-cnt').slice(0, endIndex).addClass('visible'); 
 
    } else { 
 
     $('#container .thumbnail-cnt').slice(startIndex, endIndex).addClass('visible'); 
 
    } 
 
    $('#container').data('startIndex', endIndex); 
 
});

.thumbnail-cnt { 
 
    display: none; 
 
} 
 
.visible { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div id="container" data-start-index="0" data-max-visible-length="4"> 
 
    <div class="thumbnail-cnt" data-num="1">1 
 
    </div> 
 
    <div class="thumbnail-cnt" data-num="2">2 
 
    </div> 
 
    <div class="thumbnail-cnt" data-num="3">3 
 
    </div> 
 
    <div class="thumbnail-cnt" data-num="4">4 
 
    </div> 
 
    <div class="thumbnail-cnt" data-num="5">5 
 
    </div> 
 
    <div class="thumbnail-cnt" data-num="6">6 
 
    </div> 
 
</div> 
 

 
<button id="more-projects" > Next 
 
</button>

來源

2017-08-07 17:10:50 gaetanoM

這是一個夢幻般的方法。感謝您花時間幫助 – CalAlt

@CalAlt歡迎您。 – gaetanoM

你可以試試這個爲你的JS。這將確保一個無限迴路 -

var startIndex = 0; 
$('#more-projects').on("click", function() { 

var count = 0;  
var divs = $('#container .thumbnail-cnt'); 
var len = divs.length 
var index; 
while(count < 4){ 
    index = (startIndex+count) % len; 
    divs[index].addClass('visible'); 
    count++; 
} 
startIndex += count; 

index++; //to ensure removal start from the next 

while(count < len){ 
    index = index % len; 
    divs[index++].removeClass('visible'); 
    count++; 
} 

}

%確保邊界和包裝。爲不需要顯示的其他div刪除類visible。你目前的實施一定是失敗了。

來源

2017-08-07 16:30:11

無限循環div divs一次顯示4個

回答

相關問題