Question

<html>
 <head>
 <style>
.mySlides {
display:none;
height:200px;
width:800px;
margin-left:auto;
margin-right:auto;
}
</style>
 <head>
<body>
<script>

var myIndex = 0;
carousel();

function carousel() {
    var i;
    var x = document.getElementsByClassName("mySlides");
    for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
    }
    myIndex++;
    if (myIndex > x.length) { myIndex = 1 }
    x[myIndex - 1].style.display = "block";
    setTimeout(carousel, 2000); // Change image every 2 seconds
    }
 </script>
  <section id="images">
              <img id="yeah" class="mySlides" src="image1.jpg" />
              <img class="mySlides" src="image2.jpg" />
              <img class="mySlides" src="image3.jpg" />
          </section>
</body>
</html>

所以我不确定为什么这个自动幻灯片在w3schools几乎逐字复制时无法正常工作，结果不会显示任何内容。我一直试图找出它的错误，现在大约一天半，但仍然没有运气，请帮忙！

Answer 1

我认为这不起作用，因为在编辑之前，你的脚本标记在你的html标签之前..因此脚本执行了该函数并引发了一些错误，因为你的html没有完全加载......

将脚本标记放在html代码下面（在此方案中）

请参阅代码段

<html>
  <style>
    .mySlides {
      display: none;
      height: 200px;
      width: 800px;
      margin-left: auto;
      margin-right: auto;
    }
  </style>

    <body>
      <section id="images">
        <img id="yeah" class="mySlides" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRxjU7k88PhMjr8f7tCmwOhiaik22dtZYY773ZtWG4TSOLgspnOeIhpOHHa" />
        <img class="mySlides" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQiUk8V76AvsGFAkDEHVjnZID8iFgB8LF7mQMbVVDB8mLnxb81v1g" />
      </section>
    </body>

</html>
<script>
  var myIndex = 0;
  carousel();

  function carousel() {

    var i;
    var x = document.getElementsByClassName("mySlides");
    for (i = 0; i < x.length; i++) {
      x[i].style.display = "none";
    }
    myIndex++;
    console.log(x, myIndex);
    if (myIndex > x.length) {
      myIndex = 1
    }
    x[myIndex - 1].style.display = "block";
    setTimeout(carousel, 2000); // Change image every 2 seconds
  }
</script>

Answer 2

这是幻灯片放映的略微不同的实现，允许自动旋转图像。

var image_number = 0;

function slideshow(num) {
    var images = new Array("image1.jpg", "image2.jpg", "image3.png");
    var description = new Array("Title1", "Title2", "Title3");
    var  image_length = images.length - 1;
    image_number = image_number + num;

    if (image_number > image_length) {
        image_number = 0;        
    }
    if (image_number < 0) {
        image_number = image_length;
    }

    // Change <img> src and image description in DOM
    document.getElementById("slideshow").src=images[image_number];
    document.getElementById("description").innerHTML = description[image_number];
    return false;
}

function auto_slideshow() {
    setInterval(function(){
       slideshow(1);

    }, 3000);
}

幻灯片无效：/

2 个答案: