如何通过鼠标悬停暂停滑块图像？

Question

我有一个带有li（图像）的简单HTML，我想创建一个滑块，当我将鼠标悬停在图片上时，幻灯片将暂停，当鼠标滑出时将继续。我正在使用此代码http://codepen.io/andyunleash/pen/vzGjq

你知道如何通过悬停鼠标暂停滑块吗？谢谢你的帮助。

HTML：

<ul class="slider">
    <li><img src="http://placekitten.com/800/300" alt="Placeholder"></li>
    <li><img src="http://placehold.it/800x300" alt="Placeholder"></li>
    <li><img src="http://lorempixel.com/800/300" alt="Placeholder"></li>
</ul>

JavaScript的：

function unleashSlider(container) {

    var element = container;

    var interval = 1000;

    var fadeTime = 500;

    slideOut(element);

    function slideOut(element, looping) { // slideOut Functionality

        if(looping != null) { // if looping already
            $slide = element; // $slide = the next slide
        } else { // otherwise the slide to fade out is the first child of the container
            $slide = $(element).find(">:first-child");
        }

        // grab the slide, delay using interval, then fade out
        $slide
            .delay(interval)
            .fadeOut(fadeTime, slideIn);

        // once faded out, callback to SlideIn for next slide

    }

    function slideIn() {
        var $nextSlide = $(this).next(); // get next slide

        if ($nextSlide.length == 0) { // if end of slides

            $firstSlide = $(this).parent().find(">:first-child"); // "next slide" return to first child of the slideshow

            $firstSlide.fadeIn(fadeTime); // fade in the original slide

            slideOut($firstSlide, true); // now run the slideOut again

        } else {
            // if there is a next slide
            $nextSlide.fadeIn(fadeTime); // fade it in

            slideOut($nextSlide, true); // then run the fadeOut

        }
    }
}