Javascript 使用setInterval创建进度条

我希望一个善良的灵魂能帮助我

我有一个自动播放的幻灯片，我的目的是让“下一步”按钮作为视觉辅助，在下一帧进入时突出显示。 与自动播放间隔同步

现在，更新func结束得太早了，这是我所做的最好的事情。通常，我会使用clearInterval和setInterval来创建抖动的动画

我做错了什么

*{框大小：边框框；边距：0；填充：0；}
.carousel_包装{
高度：50vh；
宽度：100%；
位置：相对位置；
}
.旋转木马框架{
宽度：100%；高度：100%；
}
.carousel_控件{
位置：绝对位置；
底部：0；
左：0；
}
.prev，.next{
高度：50px；
宽度：100px；
背景：水；
显示：内联块；
}
.下一个{
背景：线性梯度（向右，白色0%，浅绿色）；
}
.carousel_框架：第n个子项（1）{
背景：红色；
}
.carousel_框架：第n个子（2）{
背景：蓝色；
}
.carousel_框架：第n个孩子（3）{
背景：绿色；
}
window.addEventListener（'DOMContentLoaded'，（）=>{
const homepage_carousel=新的carousel（）；
});
函数旋转木马（）{
const carousel=document.getElementsByClassName（'.carousel_wrapper'）[0]；
const frames=[…document.getElementsByClassName（'carousel_frame'）；
const prev_button=document.getElementsByClassName（'prev'）[0]；
const next_button=document.getElementsByClassName（'next'）[0]；
这个.frameIndex=1；
prev_按钮。addEventListener（'单击'，（）=>{
这是resetPlay（）；
这一点。移动（-1）；
})
下一步按钮。addEventListener（'单击'，（）=>{
这是resetPlay（）；
此项动议(升1),；
})
this.hideAll=（）=>{
frames.forEach（（f）=>{
f、 style.display='none'；
});
}
this.show=（）=>{
这个；
frames[this.frameIndex-1].style.display='block'；
更新_bg（）；
}
this.move=（金额）=>{
this.frameIndex+=金额；
this.frameIndex=（this.frameIndex>frames.length？1:（this.frameIndex<1）？frame.lengh:this.frameIndex）；
this.show（）；
}
this.update_bg=（）=>{
设w=1；
让测试=设定间隔（调整，10）；
函数调整（）{
如果（w>=100）{
清除间隔（试验）；
w=0；
}否则{
w++；
next_button.style.backgroundImage=`线性渐变（向右，白色${w}%，浅绿色）`
}
}
设置间隔（调整，3000）；
}
this.autoPlay=（）=>{
这项动议（+1）
更新_bg（）；
}
this.resetPlay=（）=>{
//清除间隔（计时器）；
//计时器=设置间隔（this.autoPlay（），4000）；
}
this.show（）；
常数计时器=设置间隔（this.autoPlay，3000）；
}
大字标题
描述
CTA
大字标题
描述
CTA
大字标题
描述
CTA
以前的
下一个

change

setInterval（调整，10）至
设置间隔（调整，25），或重写以在动画完成时触发下一张幻灯片，即一张幻灯片timer@LawrenceCherone非常感谢您的迅速干预，这立即奏效。如果不是真的，我就不会被称为Dim。我通常看到setInterval的教程使用1000表示毫秒。在你的例子中，27是什么？np，它是一个伪造的ms，在3秒钟内大致将其动画化到最后，不是一个理想的解决方案。如果您使用，它会更好，但需要重写它，并使其全部基于一个计时器（3000/100）=0到100范围，在100移动到下一张幻灯片时，重置和repeat@LawrenceCherone谢谢你为我指出了正确的方向，我将重写这个使用请求动画帧。