文字在页面加载时无效

编程问答 2022-06-03

问题描述

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

1：页面加载时不加载第一张图像。我可以通过使用班级ID并将其设置为active来解决此问题，但我不喜欢使用它，因为这会造成第二个问题

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>

图片供参考： Imgur

我该如何解决？

解决方法

首先，javascript不是Java :)。另外，我不认为这是您的JavaScript问题。看一下您的图像源。第一个包含一个URL，而另两个仅包含一个本地图像。这意味着此问题来自您的图像位置。 修复方法：

  1. 尝试将其更改为本地目录中的正确路径。
  2. 将它们全部都更改为url图片，就像第一个一样。

例如：

 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";
  }
 *{
    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
    }
  }
<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="https://www.w3schools.com/howto/img_snow_wide.jpg" style="width:100%">
        </div>
        <div class="mySlides">
          <img src="https://www.w3schools.com/howto/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>

htmljavascriptslideshow