Question

我正在为一个家庭朋友创建一个网站，他想要在主页上进行幻灯片放映，我完全是自学成才，因此我在W3School上查看了如何创建自动幻灯片放映，但是当我运行代码时，它并没有工作。谁能告诉我我在做什么错？

到目前为止，这里是我所拥有的一切，所有建议都将非常有帮助。

</div>
    <!---slideshow--->
        <div class="Slideshow-container">

            <div class="mySlides-fade">
                <img src="download.jpg" style="Width:100%">
            </div>

            <div class="mySlides-fade">
                <img src="images.jpg" style="width:100%">
            </div>

            <div class="mySlides-fade">
                <img src="welding.jpg" style="width:100%">
            </div>  

            <div class="mySlides-fade">
                <img src="rollercoaster.jpg" style="width:100%">
            </div>  

        <div style="text-align:center">
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
        </div>


    </div>
    <!---start page content--->
    <div>
        <center><h2>Mission Statement</h2></center>
            <center><p>Mision statement goes here</p></center>
    </div>

<div>
    <!---javascript for slideshow--->
    <script type="text/javascript">

var slideIndex = 0;
showSlides();

function showSlides() {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("dot");
    for (i = 0; i < slides.length; i++) {
       slides[i].style.display = "none";  
    }
    slideIndex++;
    if (slideIndex > slides.length) {slideIndex = 1}    
    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";`enter code here`
    setTimeout(showSlides, 2000); // Change image every 2 seconds
}
}   
    </script>
</div>

Answer 1

您发布的代码有几个问题：

在发布的javascript代码的末尾，您还有一个额外的}，这将引发一个常规的SyntaxError。
在发布的HTML标记的开头还有一个额外的</div>-这是无效的HTML。
您的var slides定位到错误的类-类mySlides与您为元素定义的类mySlides-fade完全不同。

var slideIndex = 0;
showSlides();

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("mySlides-fade");
  var dots = document.getElementsByClassName("dot");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  slideIndex++;
  if (slideIndex > slides.length) {
    slideIndex = 1
  }
  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";
  setTimeout(showSlides, 2000); // Change image every 2 seconds
}

<!---slideshow--->
<div class="Slideshow-container">

  <div class="mySlides-fade">
    <img src="http://placekitten.com/200/300" style="Width:100%">
  </div>

  <div class="mySlides-fade">
    <img src="http://placekitten.com/300/200" style="width:100%">
  </div>

  <div class="mySlides-fade">
    <img src="http://placekitten.com/350/250" style="width:100%">
  </div>

  <div class="mySlides-fade">
    <img src="http://placekitten.com/250/350" style="width:100%">
  </div>

  <div style="text-align:center">
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
  </div>


</div>
<!---start page content--->
<div>
  <center>
    <h2>Mission Statement</h2>
  </center>
  <center>
    <p>Mision statement goes here</p>
  </center>
</div>

Answer 2

这是因为HTML中的类名不同

<div class="mySlides-fade">

以及

的Js代码中

var slides = document.getElementsByClassName("mySlides");

在两个地方都应该是“ mySlides-fade”或“ mySlides”

Javascript自动幻灯片显示问题

2 个答案: