鼠标悬停时jQuery滑块不会停止

My jQuery slider is working but I don't know why it doesn't stop when I hover it.

我的jQuery滑块正在工作，但我不知道为什么当我将它悬停时它不会停止。

I'm not using any slider plugin for this.

我没有使用任何滑块插件。

Here is the code.

这是代码。

    $(function(){

    var width = 720;
    var animationSpeed = 1000;
    var pause = 3000;
    var currentSlide = 1;

    var $slider= $('#slider');
    var $slideContainer = $slider.find('.slides');
    var $slides = $slideContainer.find('.slide');

    var interval;

    function startSlider(){
        setInterval(function(){

            $slideContainer.animate({'margin-left': '-='+width}, animationSpeed, function(){

                currentSlide++;
                if(currentSlide === $slides.length){
                currentSlide = 1;
                $slideContainer.css('margin-left', 0);
                }
            });

        }, pause);

    }

    function stopSlider(){

        clearInterval(interval);

    }



    $slider.on('mouseenter', stopSlider).on('mouseleave', startSlider);

    startSlider();
    stopSlider();


});

Any help would be appreciated.

任何帮助，将不胜感激。

4 个解决方案

#1

Try this ;)

尝试这个 ;）

var width = 720;
var animationSpeed = 1000;
var pause = 3000;
var currentSlide = 1;
var interval;

var $slider = "";
var $slideContainer = "";
var $slides = "";

function startSlider(){
  interval = setInterval(function(){
    $slideContainer.animate({
      'margin-left': '-=' + width
    },
    animationSpeed, function(){
      currentSlide++;
      if(currentSlide === $slides.length){
        currentSlide = 1;
        $slideContainer.css('margin-left', 0);
      }
    });

  }, pause);
}

function stopSlider(){
  clearInterval(interval);
}

$(function(){
  $slider = $('#slider');
  $slideContainer = $slider.find('.slides');
  $slides = $slideContainer.find('.slide');

  $slider.on('mouseenter', stopSlider).on('mouseleave', startSlider);
  startSlider();
});

#2

Man you do it wrong. To stop an interval you need to assign it to a variable before.

你做错了。要停止间隔，您需要先将其分配给变量。

Create your interval and assign it to var:

创建您的间隔并将其分配给var：

var timer = setInterval(function (){ // do stuff here });

var timer = setInterval（function（）{// do stuff here}）;
You have your time setted up, now you can stop it! Like this:

你有时间设置，现在你可以阻止它！喜欢这个：

clearInterval(timer); Hope to help you :)

clearInterval（定时器）;希望能帮到你:)

#3

if you want to Stop the interval you need to do it like:

如果你想停止间隔，你需要这样做：

var interval = setInterval(function(){//do stuff here});
clearInterval(interval);

#4

Just remove $ from your variable prefix, it is not php, it is jquery.

只需从你的变量前缀中删除$，它不是php，它是jquery。

#1