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是小提琴，我不知道我是否应该在帖子中包含这些内容。

Answer 1

调试时务必检查控制台是否有错误。通常它在devtools（铬和IE上的F12）

首先，您尝试使用带有getElementsByClassName的类选择器。此方法只使类名不是选择器。因此.slideImage传递给它时应该slideImage。

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

第二个你的slides和back_slide函数（无论如何都是小提琴）是在一个onload事件（jsfiddle的默认选项）中声明的，所以内联js不在全局范围内看< / p>

因此，请更改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 Demo

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

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

2 个答案: