Javascript：旋转活动点和左右按钮

我是初级javascript开发人员。我决定使用纯Javascript制作旋转木马。我成功地滑动了旋转木马。我已决定使活动点（也可点击），我想点的背景颜色变化时，幻灯片发生和左右按钮。我已经创建了点，但我不知道如何在我的幻灯片功能中实现点以及左键和右键。这是我的密码：

也请给我解释一下逻辑。谢谢

const images=document.getElementById（'imgs'）；
const allImages=document.queryselectoral（'imgs img'）；
const leftBtn=document.getElementById（'left'）；
const rightbn=document.getElementById（'right'）；
设指数=0；
函数运行（）{
常量点=[…document.getElementsByClassName（'star'）；
索引++；
如果（索引>allImages.length-1）{
索引=0
dot.forEach（i=>i.classList.add（'active'））
}
imgs.style.transform=`translateX（${-index*500}px）`
}
常量点=allImages.forEach（i=>{
常量elem=document.createElement（'div'）；
元素classList.add（'star'）；
document.body.appendChild（elem）
})
设x=setInterval（run，2000）；
images.onmouseover=（）=>{
净空间隔（x）
}
images.onmouseout=（）=>{
x=设置间隔（运行，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；
}

❮；
❯

您已接近结果。在

run

函数中，您只需更改当前活动的

dot

的类，并将新类设置为活动。为了便于理解，我将您的

dot

变量重命名为

dots

function run() {
  const dots = [...document.getElementsByClassName('star')];
  index++;


  if (index > allImages.length - 1) {
    index = 0
  }
  
  dots.forEach((dot, i) => {
    if (dot.classList.contains('active')) dot.classList.remove('active');
    if (i === index) dot.classList.add('active'));
  }
  imgs.style.transform = `translateX(${-index * 500}px)`

}

---

谢谢@ArnaudV。对不起，迟了答复。