Javascript图片幻灯片

我正在使用上面显示的基本代码为网站创建自动幻灯片。一切似乎都是一样的，出于某种原因，幻灯片放映不起作用。 HTML:

JS:

var指数=0；
幻灯片（）；
函数幻灯片（）{
变量i，x；
x=document.getElementById（“幻灯片”）；
对于（i=0；ix.length）{
指数=1；
}
x[index-1].style.display=“block”；
setTimeout（幻灯片放映，2000年）；
}

---

我感谢任何人的帮助和任何想法

getElementById

只返回一个项目，而不是数组，因此您不能使用它来获取所有幻灯片，使用

getElementsByCassName

（）并更改类的id：

var指数=0；
幻灯片（）；
函数幻灯片（）{
变量i，x；
x=document.getElementsByClassName（“幻灯片”）；
对于（i=0；ix.length）{
指数=1；
}
x[index-1].style.display=“block”；
setTimeout（幻灯片放映，2000年）；
console.log（'changed image'）
}

#元素。幻灯片放映#幻灯片{
显示：无；
}

图片

getElementById

只返回一个项目，而不是一个数组，因此您不能使用它来获取所有幻灯片，使用

getElementsByCassName

（）并更改类的id：

var指数=0；
幻灯片（）；
函数幻灯片（）{
变量i，x；
x=document.getElementsByClassName（“幻灯片”）；
对于（i=0；ix.length）{
指数=1；
}
x[index-1].style.display=“block”；
setTimeout（幻灯片放映，2000年）；
console.log（'changed image'）
}

#元素。幻灯片放映#幻灯片{
显示：无；
}

图片
同意戈登的观点

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

如果您切换到使用类。例如

然后，您可以使用选择所有图像。
x=document.querySelectorAll（“.slide”）

它将返回一个
节点列表
，这是一个与数组结构相似但方法不同的数组；可以通过索引访问<代码>x[0]
，
x[1]
，
x[2]

希望这有帮助。
同意戈登的观点

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

如果您切换到使用类。例如

然后，您可以使用选择所有图像。
x=document.querySelectorAll（“.slide”）

它将返回一个
节点列表
，这是一个与数组结构相似但方法不同的数组；可以通过索引访问<代码>x[0]
，
x[1]
，
x[2]

希望这会有所帮助。
您是否确认了
src=“assets/slideshow.js”
实际上就是您所拥有的
slideshow.js
？请注意，演示使用
class
和
id
来识别每张幻灯片。您不应该有多个具有相同id的元素。@Sablefoste我刚刚再次检查过，它是正确的方向。您是否确认
src=“assets/slideshow.js”
实际上就是您拥有的
slideshow.js
？请注意，演示使用
class
，并且您使用
id
来识别每张幻灯片。您不应该有多个具有相同id的元素。@Sablefoste我刚刚再次检查，它是正确的目录
    <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>

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

    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);

    }