如何使滚动动画工作（轮盘赌）

Question

我正在尝试进行滚动/轮盘动画，但没有结果。

<div class="roll">
    <img src="image.png" id="1" />
    <img src="image.png" id="2" />
    <img src="image.png" id="3" />
    <img src="image.png" id="4" />
    <img src="image.png" id="5" />
    <img src="image.png" id="6" />
    <img src="image.png" id="7" />
    etc ...
</div>

图片是内联的，因此看起来像这样

但是会有颜色而不是颜色

我和球员在一起

var players = {
    1: "Player 1",
    2: "Player 2",
    3: "Player 3"
}

当掷骰停止时，中间的那一行将选择获胜者并获得ID。

当没有更多图片要滚动时，它将重新开始

我不要求源代码。 很好的说明如何开始使用。

Answer 1

我做了类似的事情，这就是我将逐步进行的工作：

第1步-建立图像轮播

您需要确保始终将元素排列在屏幕外足够远的位置，以使用户看不到任何更改。 通常，额外的一两个屏幕外就足够了。 我不知道您打算如何构建这些图像，但是如果您提供一些源代码，我可以为您提供更多帮助。

第2步-使其移动

这是简单的部分。 只需将所有元素向左或向右移动x像素，然后在根据需要添加和删除元素时重复进行操作。 同样，使用代码我可以在这里提供更多帮助。

第3步-选择获胜者

以我的方式看，您可以通过以下两种方式之一来执行此操作。 一个-跟踪每次翻译中哪个元素与您的线条元素重叠（步骤2），或者-最后，简单地查看所有元素以查看哪个元素与该线条重叠。

简单易用的版本：输入此字后，我意识到您也可以预先确定获胜者，将x张图像与获胜者排在最后，然后再添加10到15张。 然后，只需在父元素上使用css过渡即可将其移动到足以使获胜者与蓝色条对齐的位置。 这可能是最简单的方法。

---

范例1：

任一示例的快速CSS宽松示例：

transition: left 1s ease;

https://jsfiddle.net/L2ofgs2k/ （我使用jQuery来应用样式更改，但是您可以使用常规JS来做同样的事情）

有关CSS过渡的更多帮助，请参见此处。

Answer 2

我认为您正在寻找使CS成为例行脚本的工具。 这个简单的库正是您要寻找的库 ，许多CS Go网站也都在使用它。 他们提供了恶魔和非常好的文档。 如果您了解一点jquery，它将非常简单。