Javascript幻灯片只显示第一张图片，按钮不起作用

Question

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

我在CodePen上找到了一些JS幻灯片的代码，并更改了一些东西。只有现在，它将只显示第一个图像，而不是循环，和按钮移动周围失败以及。

我复制了我在这个小提琴中所做的更改

JS代码看起来像这样(我在文档中包含了另一个片段，以防这是一个问题，小提琴没有它):

$(document).ready(function() {
/*JQuery for fade in highlighting of links*/
$(".link").hover(function() {
    $(this).animate({ color:'#fe57a1'}, 100);
}, function() {
    $(this).animate({ color: '#fff'}, 300);
});

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

HTML和CSS是在fiddle，我不知道我是否应该包括在这里的帖子。

Answer 1

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

首先，您正在尝试使用getElementsByClassName的类选择器。这个方法只接受类名，而不是选择器。因此，.slideImage传递给它时应该是slideImage。

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

第二你的slides和back_slide函数(无论如何)在一个onload事件(jsfiddle的默认选项)中声明，所以它不是在全局范围内的内联js看到

所以改变jsfiddle设置或取出内联js并使用addEventListener将事件附加到您的按钮。

HTML

<button id="prevBtn" class="prev">&#171;</button>
<button id="nextBtn" class="next">&#187;</button>

JS

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

最后一个问题是

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

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

JSFiddle演示

Answer 2

我认为这是你的元素选择不工作。将其更改为document.getElementById("slide").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; 
        }
    }