Javascript 如何设置平滑动画的动画

所以我一直在学习用JS、CSS、HTML制作动画，我试图学习如何制作类似于动画的卷轴

---

我曾尝试使用jQuery SlotMachine，尽管我对操作的执行方式非常迷茫，即使它旁边有JS代码。有人能给我解释一下，我如何用相同的API或其他API编码，或者用vanilla JS编码。

你可以用一点javascript代码尝试CSS动画来控制你的自定义动画状态

我想我的样品可以帮你

$（文档）.ready（函数（）{
设$elements=$（“.element”）；
让$transitionList=$（“.transition list”）；
设currentIndex=0；
setInterval（函数（）{
$transitionList.css(
“转化”，
“translateY（“+currentIndex*-250+”px）”
);
currentIndex++；
如果（$elements.length-1
正文{
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.集装箱{
显示器：flex；
宽度：50%；
}
.中心{
对齐项目：居中；
证明内容：中心；
}
.边境集装箱{
边框：25px实心#dfe0a0ed；
边界半径：30%；
溢出：隐藏；
}
.过渡名单{
宽度：250px；
高度：250px；
背景色：#fefe；
过渡性质：全部；
过渡时间：0.5s；
过渡计时功能：立方贝塞尔（0,1,0.1,0.2,0.7,1）；
}
.元素{
背景色：#6f6f6f；
宽度：250px；
高度：250px；
字号：188px；
显示器：flex；
}
1.首先，您必须有一个容器：

<div id="theContainer" class="container">
</div>


以前的
下一个
如何使用scroll执行此操作？就像我看到你有一个按钮监听器，所以对于滚动监听器，我会告诉它运行“（）=>slot.prev（）”当它检测到一个滚动时，我想用图像来做这件事，我会怎么做，所以用你的标记替换标记。是图标、图片或视频内容的容器。它应该以同样的方式工作。此外，您可以使用单击处理程序替换我的setInterval函数。
<div id="theContainer" class="container">
   <img src="https://picsum.photos/100/?random">
   <img src="https://picsum.photos/100/?random">
   <img src="https://picsum.photos/100/?random">
</div>

<div id="theContainer" class="container">
   <img src="https://picsum.photos/100/?image=0">
   <img src="https://picsum.photos/100/?image=1">
   <img src="https://picsum.photos/100/?image=2">
</div>
<button id="prev" value="Previous">
<button id="next" value="Next">