Question

我基本上是想在我的页面上使用以下代码： https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_slideshow_dots2

问题是我想创建该幻灯片，但是第一次加载页面时结果却没显示。当我单击圆圈时，将出现图像，并且一切正常。我收到以下错误：

Uncaught TypeError: Cannot read property 'style' of undefined
   at showDivs (details.js:26)
   at details.js:2

以下是幻灯片的代码片段：

        <div class="w3-content w3-display-container" style="max-width:800px">
          <img class="mySlides" src="<c:url value="/resources/pics/casa1.jpg" />" style="width:100%">
          <img class="mySlides" src="<c:url value="/resources/pics/casa2.jpg" />" style="width:100%">
          <img class="mySlides" src="<c:url value="/resources/pics/casa3.jpg" />" style="width:100%">
          <img class="mySlides" src="<c:url value="/resources/pics/casa4.jpg" />" style="width:100%">
          <div class="w3-center w3-container w3-section w3-large w3-text-white w3-display-bottommiddle" style="width:100%">
            <div class="w3-left w3-hover-text-khaki" onclick="plusDivs(-1)">&#10094;</div>
            <div class="w3-right w3-hover-text-khaki" onclick="plusDivs(1)">&#10095;</div>
            <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(1)"></span>
            <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(2)"></span>
            <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(3)"></span>
            <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(4)"></span>
          </div>
        </div>

还有我的details.js

    var slideIndex = 1;
    showDivs(slideIndex);


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

    function currentDiv(n) {
      showDivs(slideIndex = n);
    }

    function showDivs(n) {

      var i;
      var x = document.getElementsByClassName("mySlides");
      var dots = document.getElementsByClassName("demo");
      if (n > x.length) {slideIndex = 1}    
      if (n < 1) {slideIndex = x.length}
      for (i = 0; i < x.length; i++) {
         x[i].style.display = "none";  
      }
      for (i = 0; i < dots.length; i++) {
         dots[i].className = dots[i].className.replace(" w3-white", "");
      }
      x[slideIndex-1].style.display = "block";  
      dots[slideIndex-1].className += " w3-white";
    }

Answer 1

当您像在此处那样直接调用脚本代码时，您的文档可能尚未完全加载，因此找不到元素。在页面加载完成后，尝试运行代码，如下所示：

  window.addEventListener('load', function() {
     var slideIndex = 1;
      showDivs(slideIndex)
    };

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

    function currentDiv(n) {
      showDivs(slideIndex = n);
    }

    function showDivs(n) {

      var i;
      var x = document.getElementsByClassName("mySlides");
      var dots = document.getElementsByClassName("demo");
      if (n > x.length) {slideIndex = 1}    
      if (n < 1) {slideIndex = x.length}
      for (i = 0; i < x.length; i++) {
         x[i].style.display = "none";  
      }
      for (i = 0; i < dots.length; i++) {
         dots[i].className = dots[i].className.replace(" w3-white", "");
      }
      x[slideIndex-1].style.display = "block";  
      dots[slideIndex-1].className += " w3-white";
    }

Answer 2

确保将整个<script>元素放置在HTML的底部，紧接在body标记（</body>）的前面。我敢打赌，现在，您将代码放在.mySlides HTML之前，以便在代码首次运行时，尚未将所有这些元素解析到内存中。

此外，您的src图片属性的HTML无效是有两个原因。

您在双引号内嵌套了双引号。
您在属性值中嵌入了<和>字符，这是不允许的。

如果您确实希望在属性中使用该代码，则代码应如下所示：

<img class="mySlides" src="&lt;c:url value='/resources/pics/casa4.jpg&gt;'">

但是，为什么要使src等于另一个标签？

此外，请远离W3学校，因为众所周知那里的代码不完整，不正确或已过时。您的示例包含了您真正应该避免使用的过时技术，例如onclick等内联HTML事件属性和内联样式。

这是一个有效的版本：

.mySlides {height:100px; }

<!doctype html>
<html>
<head>
</head>
<body>
<div class="w3-content w3-display-container" style="max-width:800px">
          <img class="mySlides" src="http://cdn.shopify.com/s/files/1/0885/7466/products/smiley-decal_1024x1024.png?v=1434998018">
          <img class="mySlides" src="https://imgc.allpostersimages.com/img/posters/have-a-nice-day-smiley-face_u-L-F59IP80.jpg?src=gp&w=300&h=375">
          <img class="mySlides" src="https://images-na.ssl-images-amazon.com/images/I/41q0g8iq5iL.jpg">
          <img class="mySlides" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQjg89JZEZ2SAr1Qd6b__1RO3XoyaiVJStnzJZ5lqwoD45yKRLp">
          <div class="w3-center w3-container w3-section w3-large w3-text-white w3-display-bottommiddle" style="width:100%">
            <span class="w3-left w3-hover-text-khaki" onclick="plusDivs(-1)">&#10094;</span>
            <span class="w3-right w3-hover-text-khaki" onclick="plusDivs(1)">&#10095;</span>
            <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(1)"></span>
            <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(2)"></span>
            <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(3)"></span>
            <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(4)"></span>
          </div>
        </div>
<script>

    var slideIndex = 1;
    showDivs(slideIndex);


    function plusDivs(n) {
      showDivs(slideIndex += n);
    }

    function currentDiv(n) {
      showDivs(slideIndex = n);
    }

    function showDivs(n) {

      var i;
      var x = document.getElementsByClassName("mySlides");
      var dots = document.getElementsByClassName("demo");
      if (n > x.length) {slideIndex = 1}    
      if (n < 1) {slideIndex = x.length}
      for (i = 0; i < x.length; i++) {
         x[i].style.display = "none";  
      }
      for (i = 0; i < dots.length; i++) {
         dots[i].className = dots[i].className.replace(" w3-white", "");
      }
      x[slideIndex-1].style.display = "block";  
      dots[slideIndex-1].className += " w3-white";
    }
  </script>
  </body>
</html>

首次调用时，JavaScript函数无法正常运行

2 个答案: