Question

我使用here上显示的基本代码为网站创建自动幻灯片。一切似乎都是一样的，由于某种原因，幻灯片显示无法正常工作。 HTML：

    <article id="elements">
            <h2 class="major">Pictures</h2>



            <div class="slideshow">


                <script src="assets/slideshow.js"></script>

                <img id="slide" src="images/colin1.jpg" style="width:75%">
                <img id="slide" src="images/luke.jpg" style="width:75%">
                <img id="slide" src="images/shep.jpg" style="width:75%">
            </div>

CSS：

    body #elements .slideshow #slide {
display: none;
    }

JS：

    var index = 0;
    slideshow();

    function slideshow() {
var i, x;

x = document.getElementById("slide");

for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
}

index++;

if (index > x.length) {
    index = 1;
}

x[index-1].style.display = "block";
setTimeout(slideshow, 2000);

    }

我感谢任何人的帮助，以及任何想法！

Answer 1

同意戈登。

按ID选择时，只会选择一个元素。

如果切换到使用类。例如 <img class="slide" src="images/colin1.jpg" style="width:75%">

然后您可以使用选择所有图像。 x = document.querySelectorAll(".slide");

将返回一个nodeList，一个类似于Array的结构但具有不同的方法;可以通过索引访问。 x[0]，x[1]，x[2]。

希望这会有所帮助。

Answer 2

getElementById只返回一个项目，而不是数组，因此您无法使用它来获取所有幻灯片，使用getElementsByClassName（https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName），并更改类的ID：

＆＃13;

var index = 0;
slideshow();

function slideshow() {
  var i, x;
  x = document.getElementsByClassName("slide");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  index++;
  if (index > x.length) {
    index = 1;
  }
  x[index - 1].style.display = "block";
  setTimeout(slideshow, 2000);
  console.log('changed image')

}

＆＃13;

#elements .slideshow #slide {
  display: none;
}

＆＃13;

<article id="elements">
  <h2 class="major">Pictures</h2>
  <div class="slideshow">
    <script src="assets/slideshow.js"></script>
    <img class="slide" src="images/colin1.jpg" style="width:75%">
    <img class="slide" src="images/luke.jpg" style="width:75%">
    <img class="slide" src="images/shep.jpg" style="width:75%">
  </div>
</article>

＆＃13;

Javascript图片幻灯片

2 个答案: