Javascript 转盘上一个和下一个按钮逻辑不工作

我正在尝试使用纯Javascript制作旋转木马。我成功地滑动旋转木马，并创建了左右按钮

我将幻灯片功能添加到click event listener上的按钮中，但在按钮上实现该功能时遇到了问题。它的行为不符合预期。我的代码在下面，我如何修复它

const images=document.getElementById（'imgs'）//在这里
const allImages=document.queryselectoral（'imgs img'）；
const leftBtn=document.getElementById（'left'）；
const rightbn=document.getElementById（'right'）；
设指数=0；
函数更改SliderPage（）{
常量点=[…document.getElementsByClassName（'star'）；
索引++；
如果（索引>allImages.length-1）{
索引=0
}
imgs.style.transform=`translateX（${-index*500}px）`；
dot.forEach（（dot，i）=>{
如果（i==索引）{
dot.classList.add（'active'）
}否则{
dot.classList.remove（'active'）
}
});
};
allImages.forEach（i=>{
常量elem=document.createElement（'div'）；
元素classList.add（'star'）；
document.body.appendChild（elem）
});
rightbn.onclick=（）=>{
changeliderpage（索引+1）；
}
leftBtn.onclick=（）=>{
changeliderpage（索引-1）；
}
设x=setInterval（changeSliderPage，100000）；
images.onmouseover=（）=>{
净空间隔（x）
}
images.onmouseout=（）=>{
x=设置间隔（changeSliderPage，2000）；
}

*{
框大小：边框框；
}
身体{
保证金：0；
显示器：flex；
证明内容：中心；
对齐项目：居中；
最小高度：100vh；
}
旋转木马{
溢出：隐藏；
宽度：500px；
高度：500px；
盒影：2px2p5pRGBA（0,0,0,3）；
边界半径：5px；
}
.图像容器{
显示器：flex；
过渡：变换300ms线性；
变换：translateX（0）；
}
img{
宽度：500px；
高度：500px；
对象匹配：覆盖；
}
.明星{
光标：指针；
高度：15px；
宽度：15px；
利润率：0.10px；
边界半径：50%；
显示：内联块；
过渡：背景色0.6s；
背景色：#eeeeee；
}
.star.active{
背景色：红色；
}
钮扣{
光标：指针；
位置：相对位置；
字号：18px；
过渡：0.6s缓解；
用户选择：无；
高度：50px；
宽度：40px；
显示器：flex；
证明内容：中心；
对齐项目：居中；
对齐内容：居中对齐；
顶部：calc（50%-25px）；
}
按钮：悬停{
背景色：rgba（0,0,0,0.8）；
};
按钮，左边{
边界半径：3px 0 3px；
右：0；
}
按钮，左边{
边界半径：3px 0 3px；
左：0；
}

❮；
❯

我在旋转木马中使用的逻辑：

例如，您有4个图像： [1] [2][3][4]

我有一个用于滑动每个图像的动画，我添加了第5个图像，与第1个图像相同： [1] [2][3][4][1]

想象光标显示当前显示的图像，我会将光标标记为！ 因此，在开始时： [！1！][2][3][4][1]

现在滑块继续移动。。。 [1] [！2！][3][4][1]

等等

它移动到最后一个图像： [1] [2][3][4][！1！]

现在它必须在引擎盖下从最后一个图像移动到第一个图像，但没有任何动画，因此用户看不到整个变化：

[！1！][2][3][4][5]

---

通过这种方式，您可以获得无限旋转木马，只需在javascript中检查当前图像是否是最后一幅图像，并且您希望向右滑动->无动画。如果你在第1张图片上，想向左滑动，也一样。

你可能想重新表述你的标题，因为它很误导人。请重新表述标题和问题，并准确说明哪些内容没有被表达出来。演示中的按钮似乎工作正常。我以前从未见过有人因为代码的行为而对它感到不安？？？“它的行为很奇怪”请更具体一些，正如其他用户所说，它似乎正确，因此，请您的问题准确地解释您期望的行为和您认为的错误。我如何做到这一点

我有一个用于滑动每个图像的动画，我添加了第5个图像，与第1个图像相同：[1][2][3][4][1]