Javascript 文本在页面加载时不处于活动状态

我使用W3学校的幻灯片模板作为起点，但是我没有使用点，而是使用文本，我有两个问题

1：页面加载时第一个图像不加载。我可以通过使用类ID并将其设置为活动来解决这个问题，但我不喜欢使用它，因为这会产生第二个问题

2：当我强制加载图像时，第一张幻灯片的文本/按钮未激活。活动/悬停为红色，非活动为灰色，当页面加载强制图像时，文本为灰色

这是我的密码：

<style>
{box-sizing: border-box}
.mySlides {display: none}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: auto;
  width: auto;
  margin: 0 2px;
  color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: color 0.6s ease;
}

.active, .dot:hover {
  color: #cc3333;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}
</style>

<script>
var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";  
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " active";
}
</script>

    <div style="border-top: 6px solid #cc3333;padding-bottom: 100px; padding-top: 100px" class="row highlight-phone">
        <div class="container">
            <div class="vidrow">
                <div class="vidcolumn slideshow-container">
                    <div id="slide1" class="mySlides">
                        <img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">
                    </div>
                    <div class="mySlides">
                        <img src="img_snow_wide.jpg" style="width:100%">
                    </div>
                    <div class="mySlides">
                        <img src="img_mountains_wide.jpg" style="width:100%">
                    </div>
                </div>
                <div class="vidcolumn">
                    <div class="intro">
                        <h2 style="text-decoration:overline;text-decoration-color: #cc3333;">How It Works</h2>
                        <div id="dot" class="dot" onclick="currentSlide(1)">Learning Paths</div>
                        <br>
                        <span id="dot" class="dot" onclick="currentSlide(2)">Songs</span>
                        <br>
                        <span id="dot" class="dot" onclick="currentSlide(3)">Training</span>
                        <br>
                        <br>
                        <br>
                        <a class="btn btn-primary btn-lg btn-wi-red btn-pill" role="button" href="#">VIEW DEMO</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

{框大小：边框框}
.mySlides{display:none}
img{垂直对齐：中间；}
/*幻灯片容器*/
.slideshow容器{
最大宽度：1000px；
位置：相对位置；
保证金：自动；
}
/*点/子弹/指示器*/
多特先生{
光标：指针；
高度：自动；
宽度：自动；
边际：0.2px；
颜色：#bbb；
边界半径：50%；
显示：内联块；
过渡：颜色0.6s轻松；
}
.active，.dot:悬停{
颜色：#cc3333；
}
/*褪色动画*/
.褪色{
-webkit动画名称：淡入淡出；
-webkit动画持续时间：1.5s；
动画名称：淡入淡出；
动画持续时间：1.5s；
}
@-webkit关键帧淡入淡出{
来自{opacity:.4}
到{opacity:1}
}
@关键帧淡入淡出{
来自{opacity:.4}
到{opacity:1}
}
/*在较小的屏幕上，减小文本大小*/
@仅介质屏幕和（最大宽度：300px）{
.prev、.next、.text{font size:11px}
}
var slideIndex=1；
放映幻灯片（幻灯片索引）；
函数加滑块（n）{
放映幻灯片（幻灯片索引+=n）；
}
功能当前幻灯片（n）{
放映幻灯片（幻灯片索引=n）；
}
功能演示幻灯片（n）{
var i；
var slides=document.getElementsByClassName（“mySlides”）；
var dots=document.getElementsByClassName（“dot”）；
如果（n>slides.length）{slideIndex=1}
如果（n<1）{slideIndex=slides.length}
对于（i=0；i
歌曲


训练

供参考的图像：

---

如何解决这个问题？

首先，javascript不是java:）。另外，我不认为这与javascript有关。看看你的图像源。第一个包含url，而另外两个仅包含本地图像。这意味着这个问题来自您的图像位置。 固定方法：

尝试将其从本地目录更改为正确的路径

将它们全部更改为url图像，就像第一个一样

例如：

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

*{
框大小：边框框
}
迈斯利德斯先生{
显示：无
}
img{
垂直对齐：中间对齐；
}
/*幻灯片容器*/
.slideshow容器{
最大宽度：1000px；
位置：相对位置；
保证金：自动；
}
/*点/子弹/指示器*/
多特先生{
光标：指针；
高度：自动；
宽度：自动；
边际：0.2px；
颜色：#bbb；
边界半径：50%；
显示：内联块；
过渡：颜色0.6s轻松；
}
.主动，
.dot:悬停{
颜色：#cc3333；
}
/*褪色动画*/
.褪色{
-webkit动画名称：淡入淡出；
-webkit动画持续时间：1.5s；
动画名称：淡入淡出；
动画持续时间：1.5s；
}
@-webkit关键帧淡入淡出{
从{
不透明度：.4
}
到{
不透明度：1
}
}
@关键帧淡入淡出{
从{
不透明度：.4
}
到{
不透明度：1
}
}
/*在较小的屏幕上，减小文本大小*/
@仅介质屏幕和（最大宽度：300px）{
.prev，
下一个
.文本{
字号：11px
}
}

工作原理
学习途径


歌曲


训练

您的css中缺少*，您想制作哪种幻灯片？自动？这是一个手动的3张幻灯片，当他们点击图片中的文本时，会激活每张幻灯片。谢谢你的提示。forgot@Squish看起来我可以用javascript来调用它，但我对java的知识有限。这是一个好方法吗？如何写呢？如果是这样的话。虽然它修复了加载的其他图像，但加载页面时，第一个图像/链接仍然不活动。看这里：@ridge有你吗