如何在div中循环div

Question

我在轮盘赌网站上工作，但我不知道如何让div循环。 当他们离开区域边界时，我需要div来循环。

＆＃13;

＆＃13;

$("#right").click(function() {
  $("#one").css("left", "300px");
  $("#two").css("left", "300px");
  $("#three").css("left", "300px");
  $("#four").css("left", "300px");
  $("#five").css("left", "300px");
  $("#six").css("left", "300px");

});

$("#left").click(function() {
  $("#one").css("left", "0px");
});

＆＃13;

section {
  width: 80%;
  height: 50px;
  border: 5px solid gray;
  margin: auto;
  padding: 7px;
  z-index: 1;
  transition: left 2s ease;
  overflow: hidden;
}

div#one {
  width: 15%;
  height: 50px;
  background: black;
  float: left;
  z-index: -1;
  left: 0px;
  position: relative;
  transition: left 2s ease;
  loop: true;
}

div#six {
  width: 15%;
  height: 50px;
  margin-left: 5px;
  background: red;
  float: left;
  z-index: -1;
  left: 0px;
  position: relative;
  transition: left 2s ease;
  loop: true;
}

div#five {
  width: 15%;
  height: 50px;
  background: black;
  float: left;
  margin-left: 5px;
  z-index: -1;
  left: 0px;
  position: relative;
  transition: left 2s ease;
}

div#two {
  width: 15%;
  height: 50px;
  margin-left: 5px;
  background: red;
  float: left;
  z-index: -1;
  left: 0px;
  position: relative;
  transition: left 2s ease;
}

div#three {
  width: 15%;
  height: 50px;
  margin-left: 5px;
  background: black;
  float: left;
  z-index: -1;
  left: 0px;
  position: relative;
  transition: left 2s ease;
}

div#four {
  width: 15%;
  height: 50px;
  margin-left: 5px;
  background: red;
  float: left;
  z-index: -1;
  left: 0px;
  position: relative;
  transition: left 2s ease;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
  <div id="four"></div>
  <div id="five"></div>
  <div id="six"></div>
</section>

<button id="right">
left: 100px;
</button>

＆＃13;

＆＃13;

＆＃13;

所以当我点击按钮时，它应该移动，然后一旦它们离开区域边界，div应该循环到左边并再次显示在左边。

提前致谢！

Answer 1

你不必为所有元素设置动画，你只能动画第一个将推动另一个元素的元素，然后你需要使用溢出才能将最后一个元素放在开头。

所以你可以尝试这样的事情（当然可以改进）：

＆＃13;

＆＃13;

$("#right").click(function() {
  $('section').prepend($('section div').last().css('margin-left','-30%'));
  $('section >div').eq(1).css('margin-left', '0%');

});

$("#left").click(function() {
  $("#one").css("left", "0px");
});

＆＃13;

section {
  width: 80%;
  height: 50px;
  border: 5px solid gray;
  margin: auto;
  padding: 7px;
  z-index: 1;
  transition: left 2s ease;
  overflow: hidden;
  display: flex;
}

section>div {
  flex: 0 0 25%;
  margin: 0 5px;
  position: relative;
  color: #fff;
  text-align: center;
  transition: 1s ease;
}

#one,
#three,
#five {
  background: red;
}

#two,
#four,
#six {
  background: black;
}

section>div:first-child {
  margin-left: -30%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
  <div id="one">1</div>
  <div id="two">2</div>
  <div id="three">3</div>
  <div id="four">4</div>
  <div id="five">5</div>
  <div id="six">6</div>
</section>

<button id="right">
left: 100px;
</button>

＆＃13;

＆＃13;

＆＃13;

Answer 2

只需在jquery代码中添加一个带keyframe animation的类，并设置所需的像素和时间：

＆＃13;

＆＃13;

$("#right").click(function() {
    $("div").addClass("animate")
})

＆＃13;

section {
  width: 80%;
  height: 50px;
  border: 5px solid gray;
  margin: auto;
  padding: 7px;
  z-index: 1;
  transition: left 2s ease;
  overflow: hidden;
}

div#one {
  width: 15%;
  height: 50px;
  background: black;
  float: left;
  z-index: -1;
  left: 0px;
  position: relative;
}

div#six {
  width: 15%;
  height: 50px;
  margin-left: 5px;
  background: red;
  float: left;
  z-index: -1;
  left: 0px;
  position: relative;
}

div#five {
  width: 15%;
  height: 50px;
  background: black;
  float: left;
  margin-left: 5px;
  z-index: -1;
  left: 0px;
  position: relative;
}

div#two {
  width: 15%;
  height: 50px;
  margin-left: 5px;
  background: red;
  float: left;
  z-index: -1;
  left: 0px;
  position: relative;
}

div#three {
  width: 15%;
  height: 50px;
  margin-left: 5px;
  background: black;
  float: left;
  z-index: -1;
  left: 0px;
  position: relative;
}

div#four {
  width: 15%;
  height: 50px;
  margin-left: 5px;
  background: red;
  float: left;
  z-index: -1;
  left: 0px;
  position: relative;
}
.animate{
  animation: roulette  7s linear infinite;
}
@keyframes roulette {
    from {left: -550px;}
    to {left: 550px;}
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
  <div id="four"></div>
  <div id="five"></div>
  <div id="six"></div>
</section>

<button id="right">
left: 100px;
</button>

＆＃13;

＆＃13;

＆＃13;