如何从一个函数调用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)
  });

您可以看到上面的脚本十字每2s淡入一张图像列表。现在，我想做的是当用户单击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

所以我基本上是使用一些基本的交叉淡入淡出来创建幻灯片，下面是我当前使用的脚本：$（document）.ready（function（）{var slide = function（）{...

Answer 1

您可以使用此示例来实现您的示例。

Answer 2

将您的时间间隔引用拉到更高的范围。