浏览多个DIV元素

Question

例如，假设我有一个宽度为100％和高度为100px的

元素。在该

中，我有6个向左浮动的

元素，并启用了overflow-x。我想实现的是，用户可以滚动这些

元素的循环（使最后一个

元素跟随第一个

元素 - 无限循环）。

有什么想法如何解决？

- user1784025

---

你正在描述一个经典的滑块功能。实际上有数百个插件可以实现这一点。例如：Flexslider或slick.js。 - MattDiMu

如果你想使用jQuery，我会向你推荐一个jQuery滑块插件：http://unslider.com/。只需使用参数 { infinite: true } 进行初始化，即可获得所需的效果。 - MattDiMu

滑块将显示单个div元素（slide1：DIV1，slide2：DIV2等）。但我不想要那样。我想尽可能显示多个div元素（取决于屏幕宽度）。 - user1784025

Answer 1

根据你的前进方向，使用 append /prepend 将第一个/最后一个元素添加到内容中。

jQuery(window).keyup(function(e){
  switch(e.keyCode){
     case 37: 
      left();
      break;
     case 39:
      right();
      break;
  }
})
var container=jQuery("#container");

function left(){
  container.find(".item:last").prependTo(container);
}

function right(){
  container.find(".item:first").appendTo(container);
}

html,body {
  width:100vw;
  height:100vh;
  padding:0px;
  margin:0px;
}
#container {
  width:100vw;
  height:100px;
  display:flex;
  position:relative;
}

.item {
  width:100px;
  height: 94px;
  margin:3px;
  flex:0 1 100px;
}

.red {background:#F00;}
.green {background:#0F0;}
.blue {background:#00F;}
.yellow {background:#FF0;}
.turq {background:#0FF;}
.purple {background:#F0F;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container">
  <div class="item red"></div>
  <div class="item green"></div>
  <div class="item blue"></div>
  <div class="item yellow"></div>
  <div class="item turq"></div>
  <div class="item purple"></div>
</div>

- Patrick Evans

---

谢谢您，先生。非常好用。 - user1784025

Answer 2

您可以使用jQuery的insertAfter和insertBefore函数。

$('.next').click(function(){
     var last = $('#parent').find('div').last();
    $('#parent').find('div').first().insertAfter(last);
});

$('.prev').click(function(){
     var first= $('#parent').find('div').first();
    $('#parent').find('div').last().insertBefore(first);
});

这里是DEMO示例，涉及IT技术相关内容。

- Ashkan Mobayen Khiabani

---

请检查我的演示。 - Ashkan Mobayen Khiabani