Loop to Switch Sectionsの機能について

Question

CSS/Javascriptを使用してスライドショーを作成しようとしています。私はnextSlideとprevSlideの関数内にforループを持っています。実際に実行しようとすると、forループの前に関数の動作の警告が表示されません。

https://jsfiddle.net/ethacker/b7cyv7xh/

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

ザ・ループのためには、おそらくこのため、間違った構造です。変数としてインデックスを保持し、スライドにアクセスするために使用します。

var ndx = 0, 
    slides = document.getElementsByClassname(...), 
    activeSlide = slides[ndx]; 

そして、あなたは私がNDX =％のslides.lengthまでそれを得る...

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 
}