Javascript-CSS幻灯片不显示默认图像

我在当前的激情项目中实现了CSS幻灯片，在这个项目中，加载网页时并没有显示默认图像，我对此有一个问题。在导航/点按时，图像会成功显示，但我似乎无法找出在页面加载时显示第一个图像的小代码段（可能是Javascript函数中缺少的）。我试图简单地将“active”类添加到所需的图像中，但这只会使“dot”按钮显示为活动状态，而不会显示相应的图像。感谢您的帮助

代码如下：

var slideIndex=1；
函数加滑块（n）{
"严格使用",；
放映幻灯片（幻灯片索引+=n）；
}
功能当前幻灯片（n）{
"严格使用",；
放映幻灯片（幻灯片索引=n）；
}
功能演示幻灯片（n）{
"严格使用",；
var i；
var slides=document.getElementsByClassName（“mySlides”）；
var dots=document.getElementsByClassName（“dot”）；
如果（n>幻灯片长度）{
slideIndex=1；
}
if（n<1）{
slideIndex=slides.length；
}
对于（i=0；i

*{
框大小：边框框
}
身体{
字体系列：Verdana，无衬线；
保证金：0
}
迈斯利德斯先生{
显示：无
}
/*幻灯片容器*/
.slideshow容器{
最大宽度：400px；
位置：相对位置；
保证金：自动；
}
/*下一步和上一步按钮*/
.prev，
.下一个{
光标：指针；
位置：绝对位置；
最高：50%；
宽度：自动；
填充：16px；
利润上限：-22px；
颜色：白色；
字体大小：粗体；
字号：18px；
过渡：0.6s缓解；
边界半径：0 3px 3px 0；
}
/*将“下一步按钮”置于右侧*/
.下一个{
右：0；
边界半径：3px 0 3px；
}
/*悬停时，添加透明背景*/
.prev:悬停，
.下一步：悬停{
背景色：rgba（0,0,0,0.8）；
}
/*标题文本*/
.文本{
颜色：#F2F2；
字体大小：15px；
填充：8px 12px；
位置：绝对位置；
底部：8px；
宽度：100%；
文本对齐：居中；
}
/*数字文本（1/3等）*/
.numbertext{
颜色：#F2F2；
字体大小：12px；
填充：8px 12px；
位置：绝对位置；
排名：0；
}
/*  */
.过渡{
光标：指针；
高度：13px；
宽度：13px；
边际：0.2px；
背景色：#bbb；
边界半径：50%；
显示：内联块；
过渡：背景色0.6s；
}
/* */
忙碌的
.过渡：悬停{
背景色：#222；
}
/*褪色动画*/
.褪色{
-webkit动画名称：淡入淡出；
-webkit动画持续时间：1.5s；
动画名称：淡入淡出；
动画持续时间：1.5s；
}
/* */
@-webkit关键帧淡入淡出{
从{
不透明度：.4
}
到{
不透明度：1
}
}
/* */
@关键帧淡入淡出{
从{
不透明度：.4
}
到{
不透明度：1
}
}
/*在较小的屏幕上，减小文本大小*/
@仅介质屏幕和（最大宽度：300px）{
.prev，
下一个
.文本{
字号：11px
}
}

1/2
2/2
❮
❯

您可以为滑块中的第一个图像指定另一个类

<div class="mySlides fade block ">
 <div class="numbertext">1 / 2</div>
  <img src="#" style="width:100%">
  <div class="text"></div>
</div>

---

示例：

css代码在哪里？出于某种原因，我忽略了实现它。立即更新

.block {
 display:block;
}