javascript - html 和 css slider 未在页面刷新时加载，但在单击 nxt 或 pre 按钮时运行良好？

Question

这是 html 代码和 JavaScript 代码，在页面刷新时 slider 图像不会加载，但在单击 slider 的下一个按钮后它工作正常但在页面刷新后图像消失。

<div class="slide-banner">
            <div class="slide">
                <img src="assets/3387c282bae062cc6efada9402ef42ad.jpg" />

        </div>
        <div class="slide">
                <img src="assets/iPhone-Text-Monitoring-on-Apple-Devices-Yes-And-So-Much-More.jpg" />

        </div>
        <div class="slide">
                <img src="assets/pexels-photo-168765.jpeg" />

        </div>
        <div class="slide">
                <img src="assets/pexels-photo-355988.jpeg" />

        </div>
            <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
            <a class="next" onclick="plusSlides(1)">&#10095;</a>

Answer 1

请查看我的代码片段，它可能有助于解决您的问题。 您应该使用绝对路径而不是图像 src 中的相对路径。并调用了 plusSlides(1) 方法而不是 showSlides()。

var slideIndex = 1;

plusSlides(1);

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

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

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("slide");
  if (n > slides.length) {
    slideIndex = 1
  }
  if (n < 1) {
    slideIndex = slides.length
  }
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  slides[slideIndex - 1].style.display = "block";
}

document.addEventListener("DOMContentLoaded", function(event) {
   plusSlides(1);
});

<div class="slide-banner">
  <div class="slide">
    <img src="https://dummyimage.com/600x400/000/fff" />

  </div>
  <div class="slide">
    <img src="https://dummyimage.com/600x400/000/fff" />

  </div>
  <div class="slide">
    <img src="https://dummyimage.com/500x700/000/fff" />

  </div>
  <div class="slide">
    <img src="https://dummyimage.com/100x200/000/fff" />

  </div>
  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>