Question

所以我正在尝试向“Superslides”滑块添加进度条。我已经使用setInverval在幻灯片完成动画时触发它，并且大多数情况下它都有效。

如果有人点击滑块上的其中一个链接（下一张幻灯片，上一张或分页），我还添加了一点重置间隔，但是也可以使用hammer.js滑块有触摸支持，当我尝试时在滑动事件后做同样的事情它似乎没有正确重置。它将progess bar的宽度重置为0，但尽管尝试清除它，但间隔仍在继续。

我可能做了一些相当愚蠢的事情，但我一直在摸不着头脑，所以我想我会问我做错了什么。

$(document).on('animated.slides', function() {
      var progressBar = $('#progress-bar');
      width = 0;

      progressBar.width(width);

      var interval = setInterval(function() {

          width += 1;

          progressBar.css('width', width + '%');

          if (width >= 100) {
              clearInterval(interval);
          }

         //Trying to reset on swipe (I've also tried putting this below outside of interval

         Hammer($slides[0]).on("swipeleft swiperight", function(e) {
         width = 0;
          clearInterval(interval); 

        });


      }, 160);

      //reset on anchor click
      $("#slides a").click(function(){
        clearInterval(interval);

      });

  });

Answer 1

我相信我自己解决了这个问题。滑块的实现使用$ slide作为＆＃34;＃slider＆＃34;的变量。然后使用它来触发滑动动画。我将其复制并粘贴到我的间隔函数中。当我使用id而不是变量时，它似乎有效。

滑动时SetInterval重置

1 个答案: