setinerval只调用一个函数时运行一次

Question

你好我有一个jquery插件，我想以特定的时间间隔运行，问题我有它它只运行一次然后停止，但如果我交换函数被调用一个简单的警报（）然后它运行正常，

任何帮助将非常感激。

感谢

大卫

在你的代码

(function ($) { 
$.fn.gtSlider = function (options) { 

    /*****Defualt options****/ 
    var settings = $.extend({ 
     slideInterval: 5000, 
     slideSpeed: 10000, 
     activeSlideClass: "active" 
    }, options); 


    return this.each(function() { 

     /*****Set repsonsive widths/heights ****/ 

     /*Slider*/ 
     var slider = $(this); 
     /*Slider parent*/ 
     var parent = $(slider).parent(); 
     /*Slides*/ 
     var slide = $(parent).find("li"); 
     /*Slider outter height*/ 
     var sliderHeight = $(parent).outerHeight(); 
     /*Slider outter width*/ 
     var sliderWidth = $(parent).outerWidth(); 
     /*Count slides with */ 
     var slideCount = $(slide).length; 
     /*gtSlider width*/ 
     slider.width(sliderWidth * slideCount); 
     /*Set slider height based on parent*/ 
     slider.height(sliderHeight); 
     /*Set slider width based on parent*/ 
     slide.width(sliderWidth); 

     //Set active slide to 1 to match slide count 
     var activeSlideIndex = slide.index(); 

     function showNextSlide() {     
      /*Left slide animation*/ 
      slider.animate({ 
       right: sliderWidth 
      }, settings.slideSpeed, function() { 
      }); 
     } 


     setInterval(function() { 
      showNextSlide() 
     }, settings.slideInterval); 

    }); 
}; 
}(jQuery)); 



$(document).ready(function() { 
$(".gtslider").gtSlider({ 
    slideInterval: 2000, 
    slideSpeed: 1000, 
    activeSlideClass: "active" 
}); 
}); 




<div class="container"> 
    <div class="gtslider-wrapper"> 
     <ul class="gtslider"> 
      <li> 

      </li> 
      <li> 

      </li> 
      <li> 

      </li> 
     </ul> 
     <div style="clear:both"></div> 
    </div> 
</div> 



<style> 
.container{margin:0px auto;max-width:900px;width:100%} 
.gtslider-wrapper{overflow:hidden;width:100%;padding- bottom:40%;height:0px;display:inline-block;} 
.gtslider{position:relative;width:100%;height:auto;margin:0;text-  align:center;padding:0;overflow:hidden} 
.gtslider li{width:100%;list-style:none;text-align:center;float:left} 
.gtslider li *{margin:0px auto} 
.gtslider li img{max-width:100%;height:auto;display:block} 
</style> 

Answer 1

一些问题。你必须增量正确的财产，你必须重置动画，当所有幻灯片显示。这是固定的：

function showNextSlide() {     
      /*Left slide animation*/ 

      slider.animate({ 
       right:'+='+sliderWidth 
      }, settings.slideSpeed, function() { 

      if($(slider).css('right')==$(slider).css('width')) 
      $(slider).css('right','0') 
      }); 
     } 

检查片段：

(function ($) { 
 
$.fn.gtSlider = function (options) { 
 

 
    /*****Defualt options****/ 
 
    var settings = $.extend({ 
 
     slideInterval: 5000, 
 
     slideSpeed: 10000, 
 
     activeSlideClass: "active" 
 
    }, options); 
 

 

 
    return this.each(function() { 
 

 
     /*****Set repsonsive widths/heights ****/ 
 

 
     /*Slider*/ 
 
     var slider = $(this); 
 
     /*Slider parent*/ 
 
     var parent = $(slider).parent(); 
 
     /*Slides*/ 
 
     var slide = $(parent).find("li"); 
 
     /*Slider outter height*/ 
 
     var sliderHeight = $(parent).outerHeight(); 
 
     /*Slider outter width*/ 
 
     var sliderWidth = $(parent).outerWidth(); 
 
     /*Count slides with */ 
 
     var slideCount = $(slide).length; 
 
     /*gtSlider width*/ 
 
     slider.width(sliderWidth * slideCount); 
 
     /*Set slider height based on parent*/ 
 
     slider.height(sliderHeight); 
 
     /*Set slider width based on parent*/ 
 
     slide.width(sliderWidth); 
 

 
     //Set active slide to 1 to match slide count 
 
     var activeSlideIndex = slide.index(); 
 
     
 
     
 

 
     function showNextSlide() {     
 
      /*Left slide animation*/ 
 
      
 
      slider.animate({ 
 
       right:'+='+sliderWidth 
 
      }, settings.slideSpeed, function() { 
 
      
 
      if($(slider).css('right')==$(slider).css('width')) 
 
      $(slider).css('right','0') 
 
      }); 
 
     } 
 

 

 
     setInterval(function() { 
 
     
 
      showNextSlide() 
 
     }, settings.slideInterval); 
 

 
    }); 
 
}; 
 
}(jQuery)); 
 

 

 
$(".gtslider").gtSlider({ 
 
    slideInterval: 2000, 
 
    slideSpeed: 1000, 
 
    activeSlideClass: "active" 
 
});

.container{margin:0px auto;max-width:900px;width:100%} 
 
.gtslider-wrapper{overflow:hidden;width:100%;padding-bottom:40%;height:0px;display:inline-block;} 
 
.gtslider{position:relative;width:100%;height:auto;margin:0;text-align:center;padding:0;overflow:hidden} 
 
.gtslider li{width:100%;list-style:none;text-align:center;float:left} 
 
.gtslider li *{margin:0px auto} 
 
.gtslider li img{max-width:100%;height:auto;display:block}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="gtslider-wrapper"> 
 
     <ul class="gtslider"> 
 
      <li> 
 
11111111111111111 
 
      </li> 
 
      <li> 
 
222222222222222222222222222 
 
      </li> 
 
      <li> 
 
33333333333333333333333333333333333333333333 
 
      </li> 
 
     </ul> 
 
     <div style="clear:both"></div> 
 
    </div> 
 
</div>

附：我想你打算添加活动类到活动幻灯片（你当前的活动幻灯片变种不应该做它应该做的），但是，我想你会想出它......