如何从一个函数调用clearInterval()方法来停止另一个函数中的setInterval()方法

Question

所以我基本上使用下面的基本交叉渐变创建幻灯片是我正在使用的脚本

脚本:

  $(document).ready(function(){
        var slide = function(){
                                var active = $('.active');
                                var next = (active.next().length > 0) ? active.next() : $('#slide:first');
                                next.css('z-index',2);
                                active.fadeOut(1000,function(){// fade out the active image
                                                                active.css('z-index',1).show().removeClass('active');
                                                                next.css('z-index',3).addClass('active');
                                });
                              }
        setInterval(slide,2000)
  });

正如您所看到的,上面的脚本每两秒交叉淡出一个图像列表.现在我想做的是clearInterval(Interval id)当用户点击previous image按钮或按钮时停止幻灯片放映(即使用),next image但它似乎工作.我已经尝试过w3schools.com等的示例但无济于事

---

更新

完整的脚本,如果有任何疑问

  $(document).ready(function(){
        var slide = function(){
                                var active = $('.active');
                                var next = (active.next().length > 0) ? active.next() : $('#slide:first');
                                next.css('z-index',2);
                                active.fadeOut(1000,function(){// fade out the active image
                                                                active.css('z-index',1).show().removeClass('active');
                                                                next.css('z-index',3).addClass('active');
                                });
                              }
        setInterval(slide,2000)
  });

  //------------on click of next or prev-------
  //next
  $(".next").click(function(){
          window.clearInterval(slide_timer);//stop the auto slide

          var active = $('.active');
          var next = (active.next().length > 0) ? active.next() : $('#slide:first');
          next.css('z-index',2);
          active.fadeOut(1000,function(){// fade out the active image
                                          active.css('z-index',1).show().removeClass('active');
                                          next.css('z-index',3).addClass('active');
          });
  });
  //prev will be the same as next as soon as the stopping slide show problem is solved

Answer 1

将您的间隔参考拉出到更高的范围.

var slideTimer;

function triggerTimer(){
    slideTimer = setInterval(slide,2000);
}

function cancelTimer(){
    clearInterval(slideTimer);
}