jQuery - X rund

Question

我有一个小滑块即将工作，几乎就是我在jQuery上遇到麻烦。

首先关闭： 我希望我的滑块在间隔运行x次后重置。 我的理解是，以下方法可行，但似乎并未采取行动。 6000, slides, function() { homesliderend();

所以我们可以说slides = 2设置的时间间隔应该调用homesliderend();，但它并没有继续运行。

第二期：我也试图让它每6秒向lengther添加100％。但是，不是每次添加100只是将其设置为100而不是倍增。

＆＃13;

＆＃13;

jQuery(document).ready(function($) {
  "use strict";

  function homesliderend() {
    $(".lengther").animate({
      left: "0%"
    }, 500);
  }

  function homeslider() {
    var slides = $(".slide.t-align").length,
      lwidth = slides * 100,
      n = 0;

    $(".lengther").css("width", lwidth + "%");

    setInterval(function() {
      var tn = n + 100;
      $(".lengther").animate({
        left: "-" + tn + "%"
      }, 500);
    }, 6000, slides, function() {
      homesliderend();
    });


  }
  homeslider();
});

＆＃13;

＆＃13;

＆＃13;

Answer 1

setInterval不会自动停止，您需要清除间隔以停止它。

此外，您需要增加n的值以增加左侧参数

jQuery(document).ready(function ($) {
    "use strict";

    function homesliderend() {
        $(".lengther").animate({
            left: "0%"
        }, 500);
    }

    function homeslider() {
        var slides = $(".slide.t-align").length,
            lwidth = slides * 100,
            n = 0;

        $(".lengther").css("width", lwidth + "%");

        var interval = setInterval(function () {
            var tn = ++n * 100;
            $(".lengther").animate({
                left: "-" + n + "%"
            }, 500);
            //if the last item is slided then stop the animation and run homesliderend
            if (n == slides) {
                clearInterval(interval);
                homesliderend();
            }
        }, 6000);


    }
    homeslider();
});