Javascript 使点在滑块上处于活动状态

我用纯JS创建了这个滑块示例

滑块工作得很好。剩下要做的唯一一件事就是激活三个点，这样当第一张幻灯片打开时，第一个点就会激活，显示出与其他点不同的颜色，依此类推。此外，您应该能够在单击点时打开正确的幻灯片，因此第一个点会打开第一张幻灯片，第二个点会打开第二张幻灯片，依此类推

你能帮我做到这一点吗？您可以在下面找到源代码

const nextBtn=document.querySelector'.nextBtn'； const prevBtn=document.querySelector'.prevBtn'； const container=document.querySelector.images'； const offers=document.getElementById'offers'； const link=document.getElementById'links'； 让颜色=['7f86ff'，'2932d1'，'00067f']； 设currentSlide=0； 让文本=['Change1'，'Change2'，'Change3']； 设currentText=0； 让链接=[，]； 设currentLink=0； 函数updateSlidedirection{ 当前幻灯片= 颜色.长度+当前幻灯片+方向 %颜色、长度； container.style.backgroundColor=颜色[currentSlide]； animate[{opacity:'0.1'}，{opacity:'1.0'}]， {持续时间：200，填充：'forwards'} } 函数updateTextdirection{ 当前文本= text.length+当前text+方向 %文本长度； offers.innerHTML=文本[currentText]； 提供.animate[{transform:'translateY-50px'，不透明度：'0.0'}，{transform:'translateY0'，不透明度：'1.0'}]， {持续时间：200，填充：'forwards'} } 函数updateLinkdirection{ 电流链接= links.length+当前链接+方向 %链接长度； link.innerHTML=链接[currentLink]； 动画[{transform:'scale0,0'}，{transform:'scale1.1'}]， {持续时间：200，填充：'forwards'} } 更新slide0； updateText0； 更新k0； nextBtn.addEventListener'click'，nextSlide； prevBtn.addEventListener“单击”，prevSlide； 函数nextSlide{ 更新slide+1； updateText+1； updateLink+1； 间隔时间； } 功能前置幻灯片{ 更新slide-1； updateText-1； updateLink-1； 净空间隔； 间隔时间； } var myInterval=window.setIntervalfunction{ updateSlide+1，updateText+1，updateLink+1；}， 8000; 身体{ 最小高度：100vh； 显示器：flex； 对齐项目：居中； 证明内容：中心； 背景颜色：浅蓝色； } .图像{ 背景色：4047c9； 弹性：0.80%； 最小高度：70vh； 边界半径：10px； 位置：相对位置； 显示器：flex； 弯曲方向：立柱； 证明内容：柔性端； 对齐项目：居中； 颜色：白色； } 链接{ 文字装饰：无； 颜色：白色； 边框：纯色2px白色； 边界半径：3px； 填充物：5px10px； } 链接：悬停{ 背景色：000238； } a{ 颜色：白色； 文字装饰：无； } .圆点{ 显示器：flex； 边缘顶部：120px； 边缘底部：50px； } 点1，点2，点3{ 宽度：20px； 高度：20px； 背景色：RGB147151249； 边界半径：50%； 利润率：0px 5px； 光标：指针； } dot1:活动，dot2:活动，dot3:活动{ 背景色：fff； } .btn{ 显示：内联块； 背景：白色； 颜色：黑色； 填充：10px； 边界：无； 光标：指针； } .prevBtn{ 位置：绝对位置； 最高：50%； 左：0； 转化：转化-50%，-50%； } .nextBtn{ 位置：绝对位置； 最高：50%； 右：0； 转换：转换50%，-50%； } .btn：活动{ 背景颜色：灰色； 颜色：白色； } .btn:悬停{ 背景颜色：灰色； 颜色：白色； } 上一个Btn 下一个Btn 更改文本

---

首先，根据

：active CSS伪类表示一个元素，例如用户正在激活的按钮

因此，如果您希望点处于活动状态，您必须编写一种不同的方式来为它们提供活动状态，因为它们当前是标记，我建议为它们提供一个.active类，并添加Javascript代码以将该类添加到点上，或者在Javascript函数中以编程方式添加该类

不过，根据您的其他要求，您很可能还必须将这些点做成标签或沿着这些线的其他东西，这样您就可以在它们上添加功能，让单击这些点可以将您带到任何幻灯片。可能大致如下：

function dot1Click() {
  updateSlide(1);
  updateText(1);
  updateLink(1);
  dot1.style.backgroundColor = #fff;
}

---

然后你应该有一些你想要的东西。当我有更多的时间整理代码片段时，我会回到这个问题上来，但我想给你一些东西来帮助你开始

谢谢你的回答！我会试试这个。