Javascript 如何将多个内容依次显示为字幕？第二个内容应该需要一些时间来显示

我有两个不同的内容，我想显示的内容作为字幕在单行和内容应该显示一个又一个与一些延迟时间持续时间

<marquee direction="left">
  <label>Label 1 content here</label>
  <label>Label 2 content here</label>
</marquee>

在此处标记1内容
标签2内容在这里

请尝试以下方式使用JavaScript，而不是使用

和

标记（在本上下文中不应使用这些标记）：

$（函数（）{
$（“.slider.slide”）.hide（）；
$（“.slider.slide:first”）.fadeIn（）.delay（10000）.fadeOut（函数（）{
$（this.next（）.fadeIn（）；
});
setInterval（函数（）{
$（“.slider.slide:first”）.fadeIn（）.delay（10000）.fadeOut（函数（）{
$（this.next（）.fadeIn（）；
});
}, 20000);
});

在此处标记1内容
标签2内容在这里
请尝试以下方式使用JavaScript，而不是使用
和
标记（在本上下文中不应使用这些标记）：


$（函数（）{
$（“.slider.slide”）.hide（）；
$（“.slider.slide:first”）.fadeIn（）.delay（10000）.fadeOut（函数（）{
$（this.next（）.fadeIn（）；
});
setInterval（函数（）{
$（“.slider.slide:first”）.fadeIn（）.delay（10000）.fadeOut（函数（）{
$（this.next（）.fadeIn（）；
});
}, 20000);
});

在此处标记1内容
标签2内容在这里
您可以使用这种方式，不使用字幕，基于jquery队列并向元素添加css类：


$（函数（）{
无功电流按钮=0；
$（'div.slider.slide:first'）
.show（100）
.addClass（“活动”）；
setInterval（函数（）{
如果（当前按钮===$（'.slide'）.length）{
$（'div.slider.slide:first'）
.show（100）
.addClass（“活动”）；
当前按钮=0；
}否则{
$（“div.slider.slide”）
.隐藏（100）
.removeClass（“活动”）；
$（'div.slider.slide:eq（'+当前按钮+'））
.show（100）
.addClass（“活动”）；
当前_按钮++；
}
},3500)
});
。幻灯片{
浮动：左；
转化：translateX（400%）；
过渡：全部7秒；
}
.主动{
转化：translateX（-350%）；
}

在此处标记1内容
标签2内容在这里
您可以使用这种方式，不使用字幕，基于jquery队列并向元素添加css类：


$（函数（）{
无功电流按钮=0；
$（'div.slider.slide:first'）
.show（100）
.addClass（“活动”）；
setInterval（函数（）{
如果（当前按钮===$（'.slide'）.length）{
$（'div.slider.slide:first'）
.show（100）
.addClass（“活动”）；
当前按钮=0；
}否则{
$（“div.slider.slide”）
.隐藏（100）
.removeClass（“活动”）；
$（'div.slider.slide:eq（'+当前按钮+'））
.show（100）
.addClass（“活动”）；
当前_按钮++；
}
},3500)
});
。幻灯片{
浮动：左；
转化：translateX（400%）；
过渡：全部7秒；
}
.主动{
转化：translateX（-350%）；
}

在此处标记1内容
标签2内容在这里
这是我的解决方案，没有
标签，现在不推荐使用：


//要显示的幻灯片列表
常量内容=[
“第一张幻灯片”，
“第二张幻灯片”，
“第三张幻灯片”
];
设key=0；
常量选框=$（'.marquee'）；
marquee.on（'animationstart'，（）=>{
键=0；
文本（内容[键]）；
});
marquee.on（'animationiteration'，（）=>{
key++；
如果（内容类型[键]=“未定义”）键=0；
文本（内容[键]）；
});
移动类（“暂停”）
.marquee容器{
宽度：100vw；
溢出：隐藏；
空白：nowrap；
}
马奎尔先生{
左：100vw；
显示：内联块；
动画：字幕5s线性无限；
动画播放状态：运行；
}
.marquee.暂停，.marquee容器：悬停.marquee{
动画播放状态：暂停；
}
@关键帧选框{
0% {
变换：translateX（0）；
}
100% {
转化：translateX（-100%）；
}
}
这是我的解决方案，没有
标签，现在不推荐使用：


//要显示的幻灯片列表
常量内容=[
“第一张幻灯片”，
“第二张幻灯片”，
“第三张幻灯片”
];
设key=0；
常量选框=$（'.marquee'）；
marquee.on（'animationstart'，（）=>{
键=0；
文本（内容[键]）；
});
marquee.on（'animationiteration'，（）=>{
key++；
如果（内容类型[键]=“未定义”）键=0；
文本（内容[键]）；
});
移动类（“暂停”）
.marquee容器{
宽度：100vw；
溢出：隐藏；
空白：nowrap；
}
马奎尔先生{
左：100vw；
显示：内联块；
动画：字幕5s线性无限；
动画播放状态：运行；
}
.marquee.暂停，.marquee容器：悬停.marquee{
动画播放状态：暂停；
}
@关键帧选框{
0% {
变换：translateX（0）；
}
100% {
转化：translateX（-100%）；
}
}

您可以使用JavaScript吗？字幕标签早就死了。是的，没问题。太棒了。我将添加JavaScript和jQuery标记。让我知道我的答案是否至少在某种程度上有帮助。你同意使用JavaScript吗？字幕标签早就死了。是的，没问题。太棒了。我将添加JavaScript和jQuery标记。让我知道我的答案是否至少在某种程度上有用。嗨@Praveen，我只是想让内容从右向左移动，是否可以使用jQuery…？@Dennis Yep和no。我会使用我们的经典字幕。让我更新答案。@Dennis更新。检查。谢谢@Praveen，内容应连续显示一个接一个@丹尼斯，让我们把这个循环起来
setInterval（）
FTW.Hi@Praveen，我只是想让内容从右向左移动，是否可以使用jquery…？@Dennis Yep和no。我会使用我们的经典字幕。让我更新答案。@D