javascript - 图像轮播波动且未给出预期结果

Question

我刚刚创建了一个图像轮播请参阅我的 fiddle :https://jsfiddle.net/gd2n6paw/12/

或者您可以在这里查看:

 <div class="slider">
  <div class="container" id="img-slider">
  </div>
 </div>
 <button id="prev">
  prev
 </button>
 <button id="next">
  next
 </button>

我的 jQuery

 (function(){

var imgSlider = $('#img-slider');
var counter = 0;
var imgSliderContainer = ['http://www.xenergie.com/wp-content/uploads/2015/05/nature.jpg','http://www.pycomall.com/images/P1/Natural_Background.jpg','http://www.gochecks.net/data/media/91/Mobile_Nature_Wallpapers_35.jpg'];


function ImageSliderHome(){ 

    imgSlider.fadeOut('5000' ,function(){
        imgSlider.css('background-image', "url('" + imgSliderContainer[counter] + "')");
    }).fadeIn('5000');

    if(counter >= imgSliderContainer.length){
        counter = 0;
    }
}

$('#next').click(function(){
    counter++;
    ImageSliderHome();        
});

$('#prev').click(function(){
    if(counter == 0)
        counter = imgSliderContainer.length;
    else
        counter--;
    ImageSliderHome();
});

setInterval(ImageSliderHome,3000);

})();

当我使用“next()”和“prev()”功能按钮时

 $('#next').click(function(){
    counter++;
    ImageSliderHome();        
});

$('#prev').click(function(){
    if(counter == 0)
        counter = imgSliderContainer.length;
    else
        counter--;
    ImageSliderHome();
});

图像轮播波动。图像有时会重复，有时会自动触发。如果有人知道我在这段代码中错在哪里，请告诉我，谢谢:)

Answer 1

您没有增加计数器

类似这样的事情:

setInterval(function(){counter++;
                   ImageSliderHome();
                   },'3000');