如何旋轉元素並僅顯示其中的4個？

Question

我想編碼一個顯示團隊所有成員的旋轉框。共有6名成員，但該框只能顯示4名成員。用下一個和上一頁箭頭訪問者應該能夠看到其他成員。

我目前的解決方案，默認情況下，所有div.member都不可見。然後在javascript中設置4個全局變量（display1-4），併爲其分配數字（1-4）。對於每個下一個 -click，每個顯示變量增加1，如果高於6，則再次以1開始 - 分別與prev。這部分工作。這裏是（我想作一個的jsfiddle演示頁，但它沒有工作，或者你可以看到頁面here：

// initial setting slider.js 
 
     var display1 = 0; 
 
     var display2 = 1; 
 
     var display3 = 2; 
 
     var display4 = 3; 
 
     var maxno = 6; // number of elements 
 

 
     function ChangeSlide(direction) { 
 
     if (direction == 'next') { // arrow right 
 
      display1 = display1 + 1; 
 
      display2 = display2 + 1; 
 
      display3 = display3 + 1; 
 
      display4 = display4 + 1; 
 
     } else { // arrow left 
 
      display1 = display1 - 1; 
 
      display2 = display2 - 1; 
 
      display3 = display3 - 1; 
 
      display4 = display4 - 1; 
 
     } 
 

 
     // next gets higher than maxno 
 
     if (display1 > maxno) { 
 
      display1 = display1 - maxno; 
 
     } else if (display2 > maxno) { 
 
      display2 = display2 - maxno; 
 
     } else if (display3 > maxno) { 
 
      display3 = display3 - maxno; 
 
     } else if (display4 > maxno) { 
 
      display4 = display4 - maxno; 
 
     } 
 

 
     // prev gets lower than 1 
 
     if (display1 < 1) { 
 
      display1 = display1 + maxno; 
 
     } else if (display2 < 1) { 
 
      display2 = display2 + maxno; 
 
     } else if (display3 < 1) { 
 
      display3 = display3 + maxno; 
 
     } else if (display4 < 1) { 
 
      display4 = display4 + maxno; 
 
     } 
 

 
     // Make all existing IDs invisible 
 
     document.getElementById('slide1').style.display = 'none'; 
 
     document.getElementById('slide2').style.display = 'none'; 
 
     document.getElementById('slide3').style.display = 'none'; 
 
     document.getElementById('slide4').style.display = 'none'; 
 
     document.getElementById('slide5').style.display = 'none'; 
 
     document.getElementById('slide6').style.display = 'none'; 
 

 
     // Make specified ID visible again 
 
     document.getElementById('slide' + display1).style.display = 'inline-block'; 
 
     document.getElementById('slide' + display2).style.display = 'inline-block'; 
 
     document.getElementById('slide' + display3).style.display = 'inline-block'; 
 
     document.getElementById('slide' + display4).style.display = 'inline-block'; 
 
     } 
 

 
ChangeSlide('next');

.member { 
 
     display: none; 
 
     width: 100px;background: #FF0000;box-sizing: border-box; 
 
    }

<p><a onclick="ChangeSlide('prev')">PREV</a> -- <a onclick="ChangeSlide('next')">NEXT</a></p> 
 

 
<div class="teambox"> 
 
    <div class="member" id="slide1"><span>Member 1</span></div> 
 
    <div class="member" id="slide2"><span>Member 2</span></div> 
 
    <div class="member" id="slide3"><span>Member 3</span></div> 
 
    <div class="member" id="slide4"><span>Member 4</span></div> 
 
    <div class="member" id="slide5"><span>Member 5</span></div> 
 
    <div class="member" id="slide6"><span>Member 6</span></div> 
 
</div>

但有一個邏輯錯誤：如果我點擊3在接下來次它應該顯示的成員順序如下：

4, 5, 6, 1

相反，它表明他們LIK E本

1, 4, 5, 6

類似的邏輯上的缺陷滑動時回發生。

我的想法是，以相應地交換子元素，一種方法是

// move first child element (team member) to the last position 
var list = document.querySelector(".teambox"); 
list.appendChild(list.firstElementChild); 

這打亂整個訂單多得多，特別是因爲我沒有一個解決方案，它做它的方式相同的另一邊。

如果沒有像jQuery這樣的重型框架，我會很高興。先謝謝你！

Answer 1

這是一個高效的小型解決方案，無需外部庫。
（我試圖保持儘可能靠近你的代碼越好）

一些背景到解決方案

• Hidding成員通過父容器的CSS類的CSS overflow:hidden;實現teambox。（寬度設定爲四倍構件寬度）
• 的cylce與insertBefore命令，其移動節點

// Helper Constant so that the Code can be read/understund "better" 
 
    const AFTER_THE_LAST_ELEMENT = null; 
 

 
    function changeSlide(direction) { 
 
     var elementToMove; 
 
     var elements = document.querySelectorAll(".member"); 
 
     var parentNode = elements[0].parentNode; 
 
     var firstElement = elements[0]; 
 
     var lastElement = elements[elements.length-1]; 
 
     
 
     if(direction === "next"){ 
 
     elementToMove = firstElement; 
 
     insertBefore = AFTER_THE_LAST_ELEMENT; 
 
     }else{ 
 
     elementToMove = lastElement; 
 
     insertBefore = firstElement; 
 
     } 
 
     parentNode.insertBefore(elementToMove, insertBefore); 
 
    }

.member { 
 
    width: 100px; 
 
    background: #FF0000; 
 
    box-sizing: border-box; 
 
    float:left; 
 
    height:25px; 
 
} 
 

 
.teambox{ 
 
    width:400px; 
 
    border:solid 1px black; 
 
    overflow:hidden; 
 
    height:22px; 
 
}

<p><a onclick="changeSlide('prev')">PREV</a> -- <a onclick="changeSlide('next')">NEXT</a></p> 
 

 
<div class="teambox"> 
 
    <div class="member" id="slide1"><span>Member 1</span></div> 
 
    <div class="member" id="slide2"><span>Member 2</span></div> 
 
    <div class="member" id="slide3"><span>Member 3</span></div> 
 
    <div class="member" id="slide4"><span>Member 4</span></div> 
 
    <div class="member" id="slide5"><span>Member 5</span></div> 
 
    <div class="member" id="slide6"><span>Member 6</span></div> 
 
</div> 
 

 
<!-- tested won win7 with chrome 51+ and IE10 -->

簡短解釋完成

document.querySelectorAll(".member")返回所有作爲陣列
elements[elements.length-1]匹配從陣列中選擇的最後一個元素
elements[0].parentNode是所選元素的parentNode，當前的第一元件之前除去特定元素
parentNode.insertBefore(lastElement, firstElement)插入lastElement需要。如果第一個參數是null，則元素將被追加。有關詳細信息，請參閱MDN Reference

Answer 2

您有大量沒有任何依賴關係的滑塊組件可用。

看看http://meandmax.github.io/lory/

您將需要修改你的HTML結構有點像這樣

<div class="slider js_slider"> 
    <div class="frame js_frame"> 
    <ul class="slides js_slides"> 
     <li class="js_slide" id="slide1"><span>Member 1</span></li> 
     <li class="js_slide" id="slide2"><span>Member 2</span></li> 
     <li class="js_slide" id="slide3"><span>Member 3</span></li> 
     <li class="js_slide" id="slide4"><span>Member 4</span></li> 
     <li class="js_slide" id="slide5"><span>Member 5</span></li> 
     <li class="js_slide" id="slide6"><span>Member 6</span></li> 
    </ul> 
    </div> 
</div> 

，並添加到您的JS文件

document.addEventListener('DOMContentLoaded', function() { 
    var slider = document.querySelector('.js_slider'); 

    lory(slider, { 
     rewind: true 
    }); 
}); 

注意，你」還需要一些CSS，看看上面的鏈接。