Question

function caroussel() {
    $(".cosm-slider ul").animate({marginLeft: '-400px'}, 1500);
} 

 var carossTrigger = setInterval(function() { caroussel(); },5000);

Answer 1

我很高兴你解决了它。尽管使用setTimeout()而不是setInterval()可能是明智之举。无论结果如何，setInterval都会反复尝试。因此，您可能会告诉它以大于动画时间的频率移动滑块。将函数调用为动画的回调要好得多。示例逻辑是：完成此动画后，再次自己调用（延迟后）。

这是一个丑陋的例子，但是：

＆＃13;

(function caroussel() {
    window.i = window.i || 0;
    var $slider = $(".cosm-slider ul");
    var slideCount = $slider.find("li").length;
    if(i++ && i<=slideCount){
      $slider.animate({marginLeft: '-=100%'}, 1500, 
        function(){setTimeout(function(){caroussel()},1000);}
      );
    } else {
      i=1;
      $slider.animate({marginLeft: '0px'}, 500, 
        function(){setTimeout(function(){caroussel()},1000);}
      );
    }
})();

＆＃13;

ul {width:1000%; list-style-type:none; margin:0; padding:0}
li {
border:1px solid red;
display:inline-block;
text-align:center;
width:10%
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cosm-slider">
<ul><li>1</li><li>2</li><li>3</li><li>4</li></ul>
</div>

＆＃13;

jquery setInterval只运行一次

1 个答案: