Question

我正在撞墙撞墙，当我尝试从我的函数外部递增索引值时，我无法弄清楚发生了什么。

所以我从0开始，太棒了！每个循环通过我获得i + 1（这一切看起来都很棒）...但是当我点击#sliderNext时你会看到我不添加i值，但它仍然增加i值（为什么???）这意味着什么时候我点击上一步我必须将值减少2而不是i--（再次，为什么？）...我是否很厚，没有看到明显的东西？

也许更好的方法是添加prev + next（不会完全停止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){   	    
    		$('#autoSlider').html(imgArr[i]);
    		i++; //should increment here, not before???    	
      
    		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; } //kindah works, but still buggy
    				else{i = i - 2; } 
    				sliderRotate();					
    		});	
});

<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。在下一次执行此函数时，将显示第二个图像（索引为1），i将具有值2。

现在，您想要返回上一张图片（索引0）。但i的值为2。您必须在索引i - 2显示图片。

Answer 2

您正在调用sliderRotate（）：

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

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

这会使它增加1：

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

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

“prev”相同，当你调用sliderRotate（）时你加1，这就是你需要减去2的原因。

以下是您的代码的工作示例：https://jsfiddle.net/owbL084z/2/

setInterval增量索引之谜

2 个答案: