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

Question

我需要创建一种带有图像作为链接的圆形导航栏。通过循环，我认为元素应该重复。起初，我认为这将是一项微不足道的任务，但事实证明这并不容易。

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

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

屏幕上应该显示的是

3 1 (2) 3 1

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

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

1 2 (3) 1 2

等等。

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

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

如果有人知道如何做到这一点，请告诉我。无论是代码还是概念都会非常有帮助。

谢谢。

标签： javascripthtmljquerycsscanvas