Javascript 如何旋转元素并仅显示其中的4个？

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

默认情况下，我当前的解决方案使所有div.member都不可见。然后它在javascript中设置4个全局变量（

display1-4

），并为它们分配数字（

1-4

）。下一次单击时，每个显示变量都会增加1，如果大于6，则会再次从1开始，分别是prev。这部分是有效的。这是一个演示页面（我想制作一个JSFIDLE，但它不起作用，或者您可以看到该页面：

//初始设置slider.js
变量1=0；
变量2=1；
var=3=2；
var=4=3；
var maxno=6；//元素数
功能更改幻灯片（方向）{
如果（方向==“下一步”）{//向右箭头
display1=display1+1；
display2=display2+1；
display3=display3+1；
display4=display4+1；
}否则{//向左箭头
display1=display1-1；
display2=display2-1；
display3=display3-1；
display4=display4-1；
}
//next比maxno高
如果（显示1>最大值）{
display1=display1-maxno；
}else if（display2>maxno）{
display2=display2-最大值；
}否则如果（显示3>最大否）{
display3=display3-maxno；
}else if（display4>maxno）{
display4=display4-maxno；
}
//prev低于1
如果（显示1<1）{
display1=display1+maxno；
}否则如果（显示2<1）{
display2=display2+maxno；
}否则如果（显示3<1）{
display3=display3+maxno；
}否则如果（显示4<1）{
display4=display4+maxno；
}
//使所有现有ID不可见
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'；
//使指定的ID再次可见
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'；
}
更改幻灯片（“下一步”）；

.member{
显示：无；
宽度：100px；背景：#FF0000；框大小：边框框；
}

上一个--下一个

成员1
成员2
成员3
成员4
成员5
成员6

这是一个高效、小型的解决方案，无需外部库。
（我试图尽可能靠近您的代码）

解决方案的一些背景信息

• 隐藏成员是通过父容器css类

  teambox

  的css

  overflow:hidden；

  实现的（宽度设置为成员宽度的四倍）
• 循环使用

  insertBefore

  命令完成，该命令移动节点

//Helper常量，以便可以读取代码/更好地编译代码
最后一个元素后面的常量=null；
功能更改幻灯片（方向）{
变量元素移动；
var元素=document.queryselectoral（“.member”）；
var parentNode=元素[0]。parentNode；
var firstElement=元素[0]；
var lastElement=elements[elements.length-1]；
如果（方向==“下一步”）{
elementToMove=第一个元素；
insertBefore=在最后一个元素之后；
}否则{
elementToMove=最后一个元素；
insertBefore=firstElement；
}
parentNode.insertBefore（elementToMove，insertBefore）；
}

.member{
宽度：100px；
背景：#FF0000；
框大小：边框框；
浮动：左；
高度：25px；
}
.teambox{
宽度：400px；
边框：实心1px黑色；
溢出：隐藏；
高度：22px；
}

上一个--下一个

成员1
成员2
成员3
成员4
成员5
成员6

您可以使用大量没有任何依赖项的滑块组件

看看

您需要像这样修改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>

---

请注意，您还需要一些css，请查看上面的链接。

我的答案有帮助吗？缺少什么吗？@winner\u joiner到目前为止看起来很好，谢谢！我只需测试它是否与我页面的移动设计配合使用（如果屏幕很小，4个“成员”会分成两行）。我目前不在工作地点，明天将进行测试和评论。非常感谢！您旋转元素的方法是最好的，它帮助我最大程度地解决了问题。但是，我扩展了您的解决方案，因为它与我的页面设计不符。因此，我用一些行扩展了您的Javascript以隐藏第四个之后的所有元素，类似于我在第一个问题中的方法。你可以看到结果。再次感谢！只需用img替换span元素

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

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