Question

我正在尝试使用CSS / Javascript创建幻灯片。我在nextSlide和prevSlide的函数中有一个for循环。我在尝试实际执行时遇到问题，在for循环之前函数内的警报工作。

JS代码：

//Fetal Dev
    //Variables
var previous = document.getElementById('pPage');
var next = document.getElementById('nPage');
var slide = document.getElementsByClassName('fdSlide');
var activeSlide = slide[0];
activeSlide.style.display = 'inline'; //shows "slide[0]"
//for loop
/*for (i=1; i<slide.length; i++) {
    var activeSlide = slide[i];
    var nextSlide = slide[i] + 1;
    var prevSlide = slide[i] - 1;
}

activeSlide.style.display = 'inline';*/

//Functions

function switchPrev() {
    for (i=0; i<slide.length; i++) {
          var prevSlide = slide[i]-1;
    }

    activeSlide = slide[prevSlide];
}

function switchNext(){
    for (i=0; i<slide.length; i++) {
        var nextSlide = slide[i]+1;
    }

    activeSlide = slide[nextSlide];
}


//Event Listeners
previous.addEventListener("click", switchPrev);
next.addEventListener("click", switchNext);

Answer 1

for循环可能是错误的构造。将索引保留为变量并使用它来访问幻灯片。

var incrementSlide = function () {
    ndx++;
    ndx = ndx ℅ slides.length;
    activeSlide = slides[ndx];

    // Swap out old and new slide here
}

var decrementSlide = function () {
    ndx--;
    ndx = ndx℅ slides.length;
    activeSlide = slides[ndx];

    // Swap out old and new slide here
}

当你需要增加或减少......

{{1}}

For Loop to Switch Sections功能

1 个答案: