Javascript 具有重复元素的无限水平滚动div-循环导航

我需要创建一种圆形的导航栏，以图像作为链接。通过循环，我认为这些元素应该重复。一开始，我以为这是一项琐碎的任务，但结果却没那么容易

假设图像表示为数组[1,2,3]中的数字

当前活动索引为1（用数字2表示的图像）

屏幕上应该显示的是

31（2）31

用户可以向左或向右移动，屏幕上将显示新的图像

如果他向右走一步，屏幕上显示的新图像模式是：

1 2（3）1 2

等等

div向右移动的动画也是必要的

正确的方法是什么？我有一种感觉，这可以通过使div overflow-x可滚动来实现，但我想知道是否有更聪明的方法来实现同样的目标，也许是通过使用canvas

如果有人知道怎么做，请告诉我。无论是代码还是概念都会非常有用

---

谢谢。

请查看有关堆栈溢出的问题，以及您希望自己至少尝试编写此代码的问题类型和类型。我建议你做一些，或者通过谷歌，或者通过搜索，尝试一下。如果您仍然有问题，请返回您的代码并解释您尝试了什么。您可以重新调整此处提供的旋转木马示例的用途