javascript - 鼠标未悬停时重新启动图片库

Question

当鼠标没有悬停在图库上时，如何重新启动图库？我知道我很接近；但是，我想不通。我改编了这个 Simple-jQuery-Carousel-Slider来自 github 上的@paulmason。

js代码:

jQuery(function ($) {

// settings
var $slider = $('.slider'); // class or id of carousel slider
var $slide = 'img'; // could also use 'img' if you're not using a ul
var $transition_time = 1000; // 1 second
var $time_between_slides = 4300; // 4 seconds

function slides() {
    return $slider.find($slide);
}

slides().fadeOut();

// set active classes
slides().first().addClass('active');
slides().first().fadeIn($transition_time);

// auto scroll 
    $interval = setInterval(
      function () {
          var $i = $slider.find($slide + '.active').index();

          slides().eq($i).removeClass('active');
          slides().eq($i).fadeOut($transition_time);

          if (slides().length == $i + 1) $i = -1; // loop to start

          slides().eq($i + 1).fadeIn($transition_time);
          slides().eq($i + 1).addClass('active');
      }
      , $transition_time + $time_between_slides
    );
function pauseLoop() {
        window.clearInterval($interval);
    }

$(".slider").hover(
    function () {
        //alert("pause");
        pauseLoop(); // pause the loop  | works 
    },
    function () {
        //alert("unpause");
        $interval; //scroll()  here is the problem 
    }
);
});

html 很简单。只是一个带有图像的 div。

编辑 jsfiddle:http://jsfiddle.net/xDf4Z/10

Answer 1

将区间包装在函数中，声明区间变量，将函数返回到外部并将悬停关闭设置为新建函数。

jQuery(function ($) {

    // settings
    var $slider = $('.slider'); // class or id of carousel slider
    var $slide = 'img'; // could also use 'img' if you're not using a ul
    var $transition_time = 1000; // 1 second
    var $time_between_slides = 4300; // 4 seconds
    var $interval;

    function slides() {
        return $slider.find($slide);
    }

    slides().fadeOut();

    // set active classes
    slides().first().addClass('active');
    slides().first().fadeIn($transition_time);

    // auto scroll 
    function startloop(){
    $interval = setInterval(

    function () {
        var $i = $slider.find($slide + '.active').index();

        slides().eq($i).removeClass('active');
        slides().eq($i).fadeOut($transition_time);

        if (slides().length == $i + 1) $i = -1; // loop to start

        slides().eq($i + 1).fadeIn($transition_time);
        slides().eq($i + 1).addClass('active');
    }, $transition_time + $time_between_slides);
}
    function pauseLoop() {
        window.clearInterval($interval);
    }

    $(".slider").hover(

    function () {
        //alert("pause");
        pauseLoop(); // pause the loop
    },

    function () {
        //alert("unpause");
          startloop(); //scroll()
    });
    return startloop();
});

http://jsfiddle.net/xDf4Z/19/