Javascript 我如何每隔一段时间按顺序翻转卡片？

我正在使用HTML和CSS构建一些翻转卡。我得到的部分是，如果我悬停在上面，牌会自动翻转。现在，我正在尝试实现该卡将自动翻转一个接一个在一定的延迟间隔没有悬停。 每个翻转卡代码如下所示，我总共有4张这样的卡：

setTimeout（函数（）{
document.getElementsByClassName（“翻转卡”）.style=“变换：旋转（180度）；-webkit变换：旋转（180度）；-ms变换：旋转（180度）；”；
}，2000）

.flip卡{
背景色：透明；
宽度：100%；
高度：250px；
透视图：1000px；
}
.翻转卡内部{
位置：相对位置；
宽度：100%；
身高：100%；
文本对齐：居中；
转变：转变0.6s；
变换样式：保留-3d；
盒影：0 4px 8px 0 rgba（0,0,0,0.2）；
}
.翻转卡：悬停。翻转卡内部{
变换：旋转（180度）；
-webkit变换：旋转（180度）；
-ms变换：旋转（180度）；
}
.正面翻转卡片，.背面翻转卡片{
位置：绝对位置；
身高：100%；
背面可见性：隐藏；
}
.翻转卡正面{
背景色：rgba（249207,0,0.1）；
颜色：黑色；
z指数：100；
宽度：100%；
}

实时

即时匹配，语音
&；文字直播聊天

const cards=document.queryselectoral（'.flip card'）；
/*
*将卡向前翻转（旋转180度）或向后翻转（不旋转）的功能
*/
常量翻转卡=（卡，方向）=>{
开关（方向）{
“前进”一案：
card.children[0].classList.add（“旋转”）；
打破
“回来”一案：
card.children[0].classList.remove（“旋转”）；
打破
违约：
card.children[0].classList.toggle（“旋转”）；
}
};
/*
*用于检查自动翻转是否应跳过卡的功能
*/
常数skipFlip=（cardIndex）=>{
返回卡[cardIndex].getAttribute（'data-IsOvered'）| | false；
}
卡片。forEach（（卡片，索引）=>{
card.addEventListener（'mouseenter'，（事件）=>{
/*
*OnMouseCenter：
*1.向前翻转卡片（如果不希望出现“鼠标翻转”行为，请对函数调用进行注释）
*2.添加属性以防止自动翻转
*/
翻转卡（卡片“向前”）；
card.setAttribute（'data-isHovered'，true）；
});
card.addEventListener（'mouseleave'，（事件）=>{
/*
*请假
*1.翻转卡片（如果不希望出现“鼠标翻转”行为，请对函数调用进行注释）
*2.删除阻止自动翻转的属性
*/
翻转卡（卡片“背面”）；
card.removeAttribute（'data-isHovered'，false）；
});
});
/*
*每2秒自动向前/向后翻转一张卡
*除非卡被鼠标悬停（在这种情况下，卡将
*保持在相同的翻转位置，直到鼠标移出）
*/
设currCardIndex=0；
window.setInterval（（）=>{
const prevCardIndex=（currCardIndex==0&&cards.length-1）| | currCardIndex-1；
如果（！skipFlip（prevCardIndex））{
动画卡（卡片[前置索引]，“背面”）；
}
如果（！skipFlip（currCardIndex））{
活页卡（卡片[currCardIndex]，“向前”）；
}
currCardIndex=currCardIndex==cards.length-1？0:currCardIndex+1；
}, 2000);
.flip卡{
背景色：透明；
宽度：100%；
高度：250px；
透视图：1000px；
}
.翻转卡内部{
位置：相对位置；
宽度：100%；
身高：100%；
文本对齐：居中；
转变：转变0.6s；
变换样式：保留-3d；
盒影：0 4px 8px 0 rgba（0,0,0,0.2）；
}
.翻转卡片.旋转{
变换：旋转（180度）；
-webkit变换：旋转（180度）；
-ms变换：旋转（180度）；
}
.翻转卡正面，
.把卡片翻回去{
位置：绝对位置；
身高：100%；
背面可见性：隐藏；
}
.翻转卡正面{
背景色：rgba（249207,0,0.1）；
颜色：黑色；
z指数：100；
宽度：100%；
}



实时1

即时匹配，语音
&；文字直播聊天



实时2

即时匹配，语音
&；文字直播聊天



实时3

即时匹配，语音
&；文字直播聊天



实时4

即时匹配，语音
&；文字直播聊天


const cards=document.queryselectoral（'.flip card'）；
/*
*将卡向前翻转（旋转180度）或向后翻转（不旋转）的功能
*/
常量翻转卡=（卡，方向）=>{
开关（方向）{
“前进”一案：
card.children[0].classList.add（“旋转”）；
打破
“回来”一案：
card.children[0].classList.remove（“旋转”）；
打破
违约：
card.children[0].classList.toggle（“旋转”）；
}
};
/*
*用于检查自动翻转是否应跳过卡的功能
*/
常数skipFlip=（cardIndex）=>{
返回卡[cardIndex].getAttribute（'data-IsOvered'）| | false；
}
卡片。forEach（（卡片，索引）=>{
card.addEventListener（'mouseenter'，（事件）=>{
/*
*OnMouseCenter：
*1.向前翻转卡片（如果不希望出现“鼠标翻转”行为，请对函数调用进行注释）
*2.添加属性以防止自动翻转
*/
翻转卡（卡片“向前”）；
card.setAttribute（'data-isHovered'，true）；
});
card.addEventListener（'mouseleave'，（事件）=>{
/*
*请假
*1.翻转卡片（如果不希望出现“鼠标翻转”行为，请对函数调用进行注释）
*2.删除阻止自动翻转的属性
*/
翻转卡（卡片“背面”）；
card.removeAttribute（'data-isHovered'，false）；
});
});
/*
*自动向前/向后翻转上的卡