滚动浏览多个DIV元素

Question

例如,假设我有一个100%宽度和100px高度为div的元素.在div中,我有6个div元素向左浮动,overflow-x启用.我想要实现的是,用户可以滚动这些div的循环(以便最后一个div元素后跟第一个 - 无限循环).

任何想法如何处理？

Answer 1

您可以使用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

Answer 2

追加/前置第一/最后一个元素分别取决于你要去的方向。

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>