setIntervalインクリメントインデックスミステリー

Question

私は壁に頭を向けています。自分の機能の外からインデックス値を増やしてみると何が起きているのか把握できません。

だから、私は0として始まります。私はあなたが私の値を増やしていないことを知っているでしょう。私はprevをクリックします。私は2の値をiの代わりに減らす必要があります---（もう一度、なぜ？）...私は厚くて何かが明白ではないのですか？ここで

次へ前へ+（完全のsetIntervalを停止していないもの）を追加する、おそらくより良い方法

$.when(loadImages()).done(function(a1){ 

    var i = 0; 
    var numberOfImgs = imgArr.length; 

    function sliderRotate(passi){   
      $('#autoSlider').html(imgArr[i]); //show with current i index 
      i++; //it should increment AFTER image has shown 

      if (i >= numberOfImgs || i < 0){ i = 0; } 
    } 


sliderRotate(); 
intervalID = setInterval(sliderRotate, 3000); 

//prev + next clicks 
      $('#sliderNext').on('click' , function(){    

        clearTimeout(intervalID); 
        //x = i + 1;  
        sliderRotate();   
      }); 
      $('#sliderPrev').on('click' , function(){ 

        clearTimeout(intervalID); 
        if (i === 0){ i = imgArr.length -2; } //this only kind of works if I click twice on the first image 
        else{i = i - 2; } 
        sliderRotate();     
      }); 


});// end of when 

は、スニペットの例です：

$(document).ready(function(){ 
 

 
var imgArr = [ 
 
    '<img src="http://www.freedigitalphotos.net/images/img/homepage/87357.jpg">', 
 
    '<img src="http://assets.barcroftmedia.com.s3-website-eu-west-1.amazonaws.com/assets/images/recent-images-11.jpg">', 
 
    '<img src="https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/pia20645_main.jpg?itok=dLn7SngD">', 
 
    '<img src="https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/pia18368-1041.jpg?itok=Fkc2j_kw">', 
 
    '<img src="http://www.irishtimes.com/polopoly_fs/1.2527148.1454955520!/image/image.jpg_gen/derivatives/landscape_685/image.jpg">', 
 
    '<img src="http://www.gettyimages.in/gi-resources/images/Homepage/Hero/US/Feb2016/video-481880130.jpg">' 
 
]; 
 

 
var i = 0; 
 
    var numberOfImgs = imgArr.length; 
 

 
    function sliderRotate(passi){ \t  
 
    \t \t $('#autoSlider').html(imgArr[i]); 
 
    \t \t i++; //should increment here, not before???  \t 
 
     
 
    \t \t if (i >= numberOfImgs || i < 0){ i = 0; } 
 
    } 
 

 
    
 
sliderRotate(); 
 
intervalID = setInterval(sliderRotate, 3000); 
 

 
//prev + next clicks 
 
    \t \t $('#sliderNext').on('click' , function(){  \t \t \t 
 
    \t \t \t \t \t \t \t \t 
 
    \t \t \t \t clearTimeout(intervalID); 
 
    \t \t \t \t //x = i + 1; \t 
 
    \t \t \t \t sliderRotate(); \t \t 
 
    \t \t }); \t 
 
    \t \t $('#sliderPrev').on('click' , function(){ 
 
    \t \t \t \t 
 
    \t \t \t \t clearTimeout(intervalID); 
 
    \t \t \t \t if (i === 0){ i = imgArr.length -2; } //kindah works, but still buggy 
 
    \t \t \t \t else{i = i - 2; } 
 
    \t \t \t \t sliderRotate(); \t \t \t \t \t 
 
    \t \t }); \t 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="sliderContainer"> 
 
<div id="sliderNext">Next</div><br><br><br> 
 
<div id="sliderPrev">Prev</div> 
 
<div id="autoSlider"></div> 
 
</div>

Answer 1

初期iの値は0です。 sliderRotate関数は、最初のイメージ（インデックス0）をレンダリングし、iを1だけインクリメントします。この機能の次の実行では、第2の画像（インデックス1）が表示され、iの値は2になります。

今度は、前の画像（インデックス0）に戻りたいとします。しかし、iの値は2です。インデックスi - 2に画像を表示する必要があります。

Answer 2

あなたはsliderRotate（）を呼び出しています

$('#sliderNext').on('click' , function(){    

       clearTimeout(intervalID); 
       //x = i + 1;  
       **sliderRotate();**   
     }); 

をそして、それが1で、それをインクリメントします：あなたはsliderRotate（）を呼び出すとき

は "前" のための同じ

function sliderRotate(passi){   
     $('#autoSlider').html(imgArr[i]); 
     i++; //should increment here, not before???  

     if (i >= numberOfImgs || i < 0){ i = 0; } 
} 

、あなたは1を追加しています、そのあなたがここ2

を減算する必要がある理由であることはあなたのコードでの作業例です。https://jsfiddle.net/owbL084z/2/