Javascript幻灯片仅显示第一个图像，按钮不'；行不通

所以我马上就承认我只知道JS的基本知识。我已经在网上完成了一些课程，现在正在寻找我想做的事情的代码，这样我就可以对代码进行反向工程，并通过改变周围的事物来学习

我在CodePen上找到了一些JS幻灯片的代码，并做了一些更改。只是现在它只会显示第一个图像，而不会循环，移动按钮也会失败

我复制了我在中更改的内容

JS代码如下所示（我在文档中包含了另一个代码片段，以防出现问题，fiddle没有）：

---

HTML和CSS都在讨论中，我不知道我是否应该在文章中包括这些内容。

调试时一定要检查控制台是否有错误。通常它在devtools中（chrome和IE上的F12）

首先，您尝试将类选择器与

getElementsByClassName

一起使用。此方法只接受类名，而不是选择器。因此，

.slideImage

在传递给它时应该是

slideImage

document.getElementsByClassName("slideImage")[1].style.width="0px";

其次，您的

幻灯片

和

back\u幻灯片

函数（无论如何都在fiddle中）是在onload事件（jsiddle的默认选项）中声明的，因此它不在内联js可以看到的全局范围内

因此，更改JSFIDLE设置或取出内联js，并使用

addEventListener

将事件附加到按钮

HTML

你的最后一个问题是

var slide = document.getElementsByClassName("slideImage")[4];

数组索引应为3，因为数组索引从0开始

---

我认为是您的元素选择不起作用。 将其更改为

document.getElementById（“幻灯片”）.getElementsByTagName（“div”）[1]…

，您将看到它正在运行

var on = true;
    var myVar = setInterval(function(){ 
        if(on) {slides()}on=true;},3000);
    function slides(i) {
        document.getElementById("slide").getElementsByTagName("div")[1].style.width="0px";
        document.getElementById("slide").getElementsByTagName("div")[2].style.width="100%";
        var slide = document.getElementById("slide").getElementsByTagName("div")[0];
 document.getElementById("slide").appendChild(slide);
        if(i) {
           on = false; 
        }
    }
    function back_slide(i) {
        document.getElementById("slide").getElementsByTagName("div")[1].style.width="0px";
        document.getElementById("slide").getElementsByTagName("div")[0].style.width="100%";
        var slide = document.getElementById("slide").getElementsByTagName("div")[4];
        var slide2 = document.getElementById("slide").getElementsByTagName("div")[0];
 document.getElementById("slide").insertBefore(slide,slide2);
        if(i) {
           on = false; 
        }
    }

---

你需要检查你的控制台你有错误，当幻灯片试图继续显示另一个

文档时。GetElementsByCassName（“slideImage”）

（删除点）这是我第一次不得不做一些控制台可以帮我很多忙的事情。我不习惯检查。我想我在这里吸取了教训哈哈。去掉这个点有很大的不同。谢谢，非常感谢。到目前为止，我还没有做太多需要在控制台中调试的工作，所以一开始我甚至没有想到这一点。我还遇到了getElementByClassName问题。今天早些时候，我正在处理JQuery，并且习惯于使用（“.class”）选择类，它甚至没有点击，尽管我正在查看显示该问题的所有其他代码。再次感谢您的帮助，我做了一些更改，它工作得更好了。另外，如果

back\u slide

中的

slide

变量应该表示最后一张幻灯片，您只需使用

.length

属性减去1年就可以得到数组的最后一个索引。我一直在考虑这个问题。我有Java的背景，如果我打算在Java中做类似的事情，我会使用for循环遍历数组，并使用

.length

获取数组中的元素。这是我应该在这里做的事吗？这会使代码更易于维护和灵活吗？还是Javascript不是这样工作的？代码最初是这样设置的，但我将其更改为一个特定的类，因为在选择div时，页面中的其他div会受到影响。

document.getElementById("prevBtn").addEventListener("click",function(){
   back_slide(true); 
});
document.getElementById("nextBtn").addEventListener("click",function(){
   slides(true); 
});

var slide = document.getElementsByClassName("slideImage")[4];

var on = true;
    var myVar = setInterval(function(){ 
        if(on) {slides()}on=true;},3000);
    function slides(i) {
        document.getElementById("slide").getElementsByTagName("div")[1].style.width="0px";
        document.getElementById("slide").getElementsByTagName("div")[2].style.width="100%";
        var slide = document.getElementById("slide").getElementsByTagName("div")[0];
 document.getElementById("slide").appendChild(slide);
        if(i) {
           on = false; 
        }
    }
    function back_slide(i) {
        document.getElementById("slide").getElementsByTagName("div")[1].style.width="0px";
        document.getElementById("slide").getElementsByTagName("div")[0].style.width="100%";
        var slide = document.getElementById("slide").getElementsByTagName("div")[4];
        var slide2 = document.getElementById("slide").getElementsByTagName("div")[0];
 document.getElementById("slide").insertBefore(slide,slide2);
        if(i) {
           on = false; 
        }
    }