javascript - 如何旋转元素并只显示其中的 4 个？

Question

我想编写一个显示团队所有成员的旋转框。总共有 6 个成员，但该框应该只显示 4 个成员。使用 next 和 prev 箭头，访问者应该能够看到其他成员。

我当前的解决方案使所有 div.member 默认不可见。然后它在 javascript 中设置 4 个全局变量 (display1-4) 并为它们分配数字 (1-4)。每点击一次 next，每个显示变量都会递增 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>

但是有一个逻辑错误:如果我在 next 上单击三次，它应该按以下顺序显示成员:

4, 5, 6, 1

而是像这样显示它们

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

这是一个高效的小型解决方案，没有外部库。
(我尽量靠近你的代码)

解决方案的一些背景

• 隐藏成员是通过父容器css-class teambox的css overflow:hidden;实现的。 (宽度设置为成员宽度的四倍)
• 循环是通过 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") returns all matches as Array
elements[elements.length-1] selects last element from Array
elements[0].parentNode is the parentNode of the selected Element, needed to remove the specific element
parentNode.insertBefore(lastElement, firstElement) inserts lastElement before the current first element. if the first Parameter is null the element will be appened. See MDN Reference for Details