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>

因此，一旦我点击一个按钮，它应该向左转换500px，并将图像环绕到左边，使图像保持向右，直到图像进一步向500px，并且它应该在边界外不可见。

非常感谢您的帮助！

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>

Answer 2

父元素在您的css代码中需要{ overflow-y: hidden; }

在没有滚动条的情况下并排显示图像

2 个答案: