Question

我刚创建了一个图片轮播看到我的小提琴：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);

})();

当我使用＆＃39; next（）＆＃39;和＆＃39; prev（）＆＃39;功能按钮

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

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

图像轮播是波动的。图像会重复几次，有时会自动触发。如果有人知道我在这个代码中出错了，谢谢：）

Answer 1

您没有增加计数器

这样的事情：

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

Image Carousel是波动的＆amp;没有给出期望的结果

1 个答案: