Javascript 带文本的非标准幻灯片放映

我想在我的网站上做一个文本幻灯片。 我们在H1标签中有一个文本，在P标签中有另一个文本。 关键是当你打开一个网页时，幻灯片立即开始播放。H1标记中的文本缓慢出现（例如淡入淡出或滑动方法），然后P标记中的文本出现。 一段时间后，文本同时消失。 再次继续重新启动时，将显示文本H1，然后是P，依此类推。请注意，所有文本都存储在一个对象数组中。也许你有什么想法？多谢各位

var headerSlidesArray = [
{
    'h1' : 'Lorem Ipsum is simply dummy text of the printing and typesetting industry',
    'p' : "Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book"
},
{
    'h1' : 'Second H1',
    'p' : 'Second P'
},
{
    'h1' : 'Third H1',
    'p' : 'Third P'
}];

HTML代码：

<div id="slider">
            <div class="slide">
                <h1></h1>
                <p></p>
            </div>
            <div id="sliderBtns">
                <div class="sliderBtn active"></div>
                <div class="sliderBtn"></div>
                <div class="sliderBtn"></div>
            </div>
        </div>

我会运行一个函数，该函数总是在特定时间后被计时器调用。变量跟踪当前向用户显示的状态。根据该值，可以显示下一个文本

setTimeout（myFunction，1200）；
var计数器=0；
var headline=document.getElementById（'headline'）；
var subHeadline=document.getElementById（'subHeadline'）；
函数myFunction（）{
如果（（计数器%2）==0）
{
headline.innerHTML=“headline 2”；
subHeadline.innerHTML=“subHeadline 2”；
}
否则如果（（计数器%2）==1）
{
headline.innerHTML=“headline 1”；
subHeadline.innerHTML=“subHeadline 1”；
}
计数器++；
设置超时（myFunction，1000）；
}

标题1
子标题1

var headerSlideIndex=1；
var nextHeaderSlideIndex=磁头滑动指数+1；
var headerSlideShowLoop；
var Headerslidescont；
$（'.slide:n个子项（'+headerSlideIndex+'））.show（）；
$（'.slide:n个子项（'+headerSlideIndex+'）>h1'）。fadeIn（1500）；
$（'.slide:n个子（'+headerSlideIndex+'）>p'）。延迟（1500）。fadeIn（1500）；
开始滑块（）；
函数startHeaderSlider（）{
headerSlidesCount=$（'#slider>.slide'）。长度；
headerSlideShowLoop=setInterval（函数（）{
如果（下一个标题滑块索引>标题滑块索引）{
人头滑动指数=1；
nextHeaderSlideIndex=1；
}
展台幻灯片（位于幻灯片索引下）；
}, 8000);
}
函数prevHeaderSlide（）{
var prevHeaderSlide=Headerslide指数-1；
showHeaderSlide（prevHeaderSlide）；
}
函数nextHeaderSlide（）{
var nextHeaderSlide=人头滑梯指数+1；
展台滑梯（下一个滑梯）；
}
函数stopHeaderSlideShowLoop（）{
窗口清除间隔（headerSlideShowLoop）；
}
函数showHeaderSlide（id）{
stopHeaderSlideShowLoop（）；
$（'.sliderBtn'）.removeClass（'active'）；
如果（id>headerSlidesCount）{
id=1；
}else if（id<1）{
id=车头滑道；
}
$（'.slide'）.hide（）；
$（'.slide>h1'）.hide（）；
$（'.slide>p'）.hide（）；
$（'.slide:n个子（'+id+'））.show（）；
$（'.slide:nth child（'+id+'）>h1'）.fadeIn（1500）；
$（'.slide:nth child（'+id+'）>p'）.delay（1500）.fadeIn（1500）；
$（'.sliderBtn:n个子（'+id+'））.addClass（'active'）；
headerSlideIndex=id；
nextHeaderSlideIndex=id+1；
startHeaderSlider（）
}
$（'.sliderBtn'）。单击（函数（e）{
e、 预防默认值（）；
showHeaderSlide（$（e.target）.index（）+1）；
});
#滑块{
宽度：100%；
高度：200px；
位置：相对位置；
}
.幻灯片{
显示：无；
}
.幻灯片>h1{
显示：无；
}
.幻灯片>p{
显示：无；
}
#滑道{
位置：绝对位置；
底部：0；
右：0；
显示器：flex；
}
.sliderBtn{
利润率：0.5px；
宽度：1em；
高度：1公厘；
背景色：rgba（0,0,0,0）；
边框：0.1rem实心rgb（0,0,0）；
边界半径：50%；
光标：指针；
}
.sliderBtn.active{
背景色：rgb（245212 118）；
边框颜色：rgb（245212 118）；
}

标题1
第1款

标题2
第2款

标题3
第3款

这绝对不是最好的解决方案，也不能回答我的问题。@JankSym好的，你能更深入地解释一下什么对你不好吗？