Question

我正在尝试在页面加载时自动启动多个功能。但是，我只能使用第一个函数，而忽略第二个函数。我有两个幻灯片（改编自w3schools），不会自动加载第一张图片幻灯片，只有在点击箭头后才显示图片以更改为下一张幻灯片，然后才能正确显示。但是，我希望这两个幻灯片在页面加载时自动显示第一张幻灯片。这就是我所拥有的，以及我尝试过的东西：

（对我来说，我是一个JavaScript新手）

var slideIndex = 1;
var slideIndex2 = 1;
showSlides(slideIndex);
showSlides2(slideIndex2);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function plusSlides2(m) {
  showSlides2(slideIndex2 += m);
}

function currentSlide2(m) {
  showSlides2(slideIndex2 = m);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  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";
};

function showSlides2(m) {
  var j;
  var slides2 = document.getElementsByClassName("mySlides2");
  if (m > slides2.length) {
    slideIndex2 = 1
  };
  if (m < 1) {
    slideIndex2 = slides2.length
  };
  for (j = 0; j < slides2.length; j++) {
    slides2[j].style.display = "none";
  };
  slides2[slideIndex2 - 1].style.display = "block";
};

function start() {
  showSlides(1);
  showSlides2(1);
};

/* Slideshow Styles
Adapted from:
https://www.w3schools.com/howto/howto_js_slideshow.asp */

* {
  box-sizing: border-box
}


/* Slideshow container */

.slideshow-container {
  display: block;
  float: left;
  max-width: 1000px;
  height: 450px;
  min-width: 425px;
  position: relative;
  margin: 0px 15px 0px 0px;
  width: 60%;
}

.mySlides,
.mySlides2 {
  height: 450px;
  line-height: 450px;
  margin: auto !important;
  text-align: center !important;
  display: none;
  width: 99% !important;
}

.mySlides img,
.mySlides2 img {
  /*margin: auto;*/
  max-height: 450px;
  max-width: 425px;
  height: auto;
  width: auto;
}


/* Next & previous buttons */

.slprev,
.slnext {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: black;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}


/* Position the "next button" to the right */

.slnext {
  right: 0;
  border-radius: 3px 0 0 3px;
}


/* Number text (1/3 etc) */

.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}


/* 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
  }
}

<html>

<body onload="start();">
  <header></header>
  <section>
    <div class="slideshow-container">
      <div class="mySlides fade">
        <div class="numbertext">1 / 12 </div>
        <img src="http://cdn3-www.dogtime.com/assets/uploads/gallery/30-impossibly-cute-puppies/impossibly-cute-puppy-21.jpg" />
      </div>

      <div class="mySlides fade">
        <div class="numbertext">2 / 12 </div>
        <img src="http://cdn2-www.dogtime.com/assets/uploads/gallery/30-impossibly-cute-puppies/impossibly-cute-puppy-8.jpg" />
      </div>

      <div class="mySlides fade">
        <div class="numbertext">3 / 12 </div>
        <img src="http://cdn1-www.dogtime.com/assets/uploads/gallery/30-impossibly-cute-puppies/impossibly-cute-puppy-2.jpg" />
      </div>

      <!-- And so on -->

      <div class="slideshow-arrows">
        <a class="slprev" onClick="plusSlides(-1)">&#10096;</a>
        <a class="slnext" onClick="plusSlides(1)">&#10097;</a>
      </div>

    </div>

    <div class="slideshow-container">

      <div class="mySlides2 fade">
        <div class="numbertext">1 / 9 </div>
        <img src="http://cdn3-www.cattime.com/assets/uploads/2011/08/best-kitten-names-1.jpg" />
      </div>

      <div class="mySlides2 fade">
        <div class="numbertext">2 / 9 </div>
        <img src="https://pbs.twimg.com/profile_images/562466745340817408/_nIu8KHX.jpeg" />
      </div>

      <div class="mySlides2 fade">
        <div class="numbertext">3 / 9 </div>
        <img src="http://leecamp.net/wp-content/uploads/kitten-3.jpg" />
      </div>

      <!-- And so on -->

      <div class="slideshow-arrows">
        <a class="slprev" onClick="plusSlides2(-1)">&#10096;</a>
        <a class="slnext" onClick="plusSlides2(1)">&#10097;</a>
      </div>

    </div>

  </section>
</body>

</html>

正如您所看到的，我刚从w3schools复制了原始JavaScript，并将所有变量更改为第二个变量的新变量。我确信有更好的方法可以做到这一点，但至少它确实有效。现在，为了解决第一张幻灯片没有自动显示的问题，我最初添加到我的身体：

<body onload="showSlides(1);">

非常适合在加载时显示我的第一张幻灯片。它也可以在我的第二张幻灯片上自动显示第一张幻灯片：

<body onload="showSlides2(1);">

然而，当我尝试时它只加载第一个：

<body onload="showSlides(1);showSlides2(1);">

所以没有好处。这是我在网上寻找解决方案的地方。我看到了this one on here about combining them into a different function。那时我转而使用名为“start”的JavaScript函数来使用我的两个函数并将onload更改为：

function start() {
    showSlides(1);
    showSlides2(1);
};

仍然只加载第一个。所以我改变了他们的顺序（把showSlide2（1）;首先），然后第二个会加载，第一个不会。

所以我搜索了另一种方法并遇到examples使用“addEventListener”来完成此操作。但是，尝试使用它不会导致加载 - 我猜它是因为我不知道如何正确使用它。我删除了start函数，并在“showSlides”和“showSlides2”函数之前添加了“addEventListener”：

document.addEventListener("load", showSlides);
document.addEventListener("load", showSlides2);

我也试过它，包括1 - 例如document.addEventListener（“load”，showSlides（1））; - 但这也没有做任何事情。我希望它像修复语法一样简单，但我似乎无法自己解决这个问题。

所以这就是问题：如何在页面加载时发生这两种功能？

如果重要，我使用的是Firefox 51.0.1和Chrome 56.0.2924.87来测试它，两者的结果相同。谢谢你的时间。

Answer 1

在DOMContentLoaded来电时，将document事件附加到load .addEventListener()。

在事件处理程序中执行操作，而不是立即调用document.addEventListener("load", showSlides(1));的{{1}}。

另外，请在showSlides() DOCTYPE添加html声明。

document

如何使用JavaScript addEventListener在页面加载时运行两个或更多函数？

1 个答案: