Question

您好我正在尝试为我正在制作的网站创建一个javascript演示文稿。它非常基础，主要使用w3schools的指南之一。当我在内部使用javascript时，演示文稿正常工作，但是当在外部使用它时，它会将所有图片加载到列表中，但是当您按下＆＃34; next＆＃34;按钮，它们都消失了，演示文稿正常工作。 here is the page on load

下面是HTML

 <script type="text/javascript" src="../javascript/slide.js"></script>



           <div class="slideshowcontainer">  
             <img class="slideshow" src="../images/formalplace1.jpg" style="width:500px" "height:400px">
  <img class="slideshow" src="../images/formalplace2.jpg" style="width:500px" "height:400px">
  <img class="slideshow" src="../images/formalplace3.jpg" style="width:500px" "height:400px">
  <img class="slideshow" src="../images/formalplace4.jpg" style="width:500px" "height:400px">

  <button class="left-button" onclick="plusDivs(-1)">&#10094;</button>
  <button class="right-button" onclick="plusDivs(1)">&#10095;</button>
</div>

和javascript

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

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

我对javascript不太熟悉，不过我已经尝试过window.onload和document.onload，并且还用函数包围它。

任何帮助都将不胜感激，谢谢。

Answer 1

你的外部JS应该在这个<script src="filename.js"></script>

的body标签内

Answer 2

确保在调用showDivs之前已加载dom。

＆＃13;

var slideIndex = 1;

document.addEventListener("DOMContentLoaded", function(){
  showDivs(slideIndex);
});

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("slideshow");
  if (n > x.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";  
  }
  x[slideIndex-1].style.display = "block";
}

＆＃13;

 <div class="slideshowcontainer">  
   <img class="slideshow" src="../images/formalplace1.jpg" alt="1" style="width:500px" "height:400px">
  <img class="slideshow" src="../images/formalplace2.jpg" alt="2" style="width:500px" "height:400px">
  <img class="slideshow" src="../images/formalplace3.jpg" alt="3" style="width:500px" "height:400px">
  <img class="slideshow" src="../images/formalplace4.jpg" alt="4" style="width:500px" "height:400px">

  <button class="left-button" onclick="plusDivs(-1)">&#10094;</button>
  <button class="right-button" onclick="plusDivs(1)">&#10095;</button>
</div>

＆＃13;

Answer 3

正如@gyre指出的那样，您可以在包含外部JavaScript文件的同时使用defer属性。

所以，这将起作用

<script type="text/javascript" src="../javascript/slide.js" defer></script>

我的外部JavaScript没有正常工作，但在内部它很好

3 个答案: