滑块徘徊

Question

我有一个可用的滑块，但是当鼠标离开<li>图像时，我试图让滑块继续。

鼠标使用.hover()方法进入时会停止 - 但一旦鼠标离开图像，它就不会继续。

非常感谢任何帮助。

    jQuery(function ($) {
        // settings
        var $slider = $('.home-slider'); // class or id of carousel slider
        var $slide = 'li'; // could also use 'img' if you're not using a ul
        var $transition_time = 1000; // 1 second
        var $time_between_slides = 5000; // 5 seconds

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

        slides().fadeOut();

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

        // 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);

        $('.home-slider').hover(function () {
            $interval = clearInterval($interval);
        }, function () {
            interval = setInterval($transition_time, $time_between_slides);
        });

        $('home-slider').mouseout(function () {
            slides().fadeOut();
        });
    });

Answer 1

我重新构建了您的代码以便正常工作。

我所做的是将设置和个人功能移到jQuery(function($) { ... });之外。我修改了第一个setInterval以使用sliderInterval函数和hover事件来使用相同的函数。

我还删除了mouseout事件处理程序，因为我觉得没必要。

代码现在应该如下工作：

1. 自动滑过页面加载中的元素
2. 当其中一张幻灯片悬停在
上时滑动停止
3. 鼠标离开幻灯片后继续滑动。

Example JSFiddle

代码：

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

    jQuery(function ($) {
        slides().fadeOut();

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

        // auto scroll
        $interval = setInterval(sliderInterval, $transition_time + $time_between_slides);

        $('.home-slider').hover(function () {
            $interval = clearInterval($interval);
        }, function () {
            $interval = setInterval(sliderInterval, $time_between_slides);
        });
    });

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

    function sliderInterval() {
        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');
    }