javascript - 没有滚动条并排显示图像

Question

我正在开发一个轮盘赌网站，但我无法让轮盘赌动画正常工作。我有轮盘赌的图像，但我需要图像在一定数量的 % 后消失，并且图像向左循环。

这就是它需要的样子(它不会在边界的尽头结束，也不会绕到左边的想法。):

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

});

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

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

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;
}

<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>
    <div id="seven"></div>
    <div id="eight"></div>
</section>

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

这就是我想要的样子，但边框必须在屏幕末端附近结束，并且图像必须在边框外不可见，并环绕:

div.numbers {
    display: inline-flex;
    border: 4px solid gray;
}

div.numbers img {
    margin-right: 5px;
}

<section>
  <div class="numbers">
    <img src="https://image.ibb.co/jrnaVG/cases.png">
    <img src="https://image.ibb.co/jrnaVG/cases.png">
    <img src="https://image.ibb.co/jrnaVG/cases.png">
  </div>
</section>

因此，一旦我单击一个按钮，它应该向左过渡 500 像素，并将图像向左循环，这样图像就会一直向右移动，直到图像进一步向右移动 500 像素，并且它应该在边界外不可见。

非常感谢您的帮助!

Answer 1

您真的很接近于隐藏滚动的内容。您只需要使用 overflow: hidden;

隐藏部分中的溢出

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

});

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

section {
  width: 80%;
  height: 50px;
  border: 5px solid black;
  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;
}

<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>
  <div id="seven"></div>
  <div id="eight"></div>
</section>

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