Image Slider Не работает право

Question

Код ниже дозы не работает правильно. Я хочу, чтобы слайдер изображений менялся каждые 5 секунд, но если я наведу на него курсор, он остановится, а когда я уйду, он снова запустится. Когда вы нажмете на нее, она изменится. Я могу изменить его каждые 5 секунд, и изменить его, когда я нажму, но я не могу остановить его, когда зависаю.

$('document').ready(function() {

    var img = 0;
    var pic = ['nature', 'grass', 'earth', 'fall', 'fall2'];
    var slider = 'img.slide_img'; // html image

    function slide() {
        $(slider).attr('src', 'pictures/' + pic[img] + '.jpg');
        img++;
        if (img >= pic.length) {
            img = 0;
        }
    }

    $(slider).on('mouseleave', function() {
        auto(3000);
    });

    $(slider).on('click', function() {
        slide();
    });

    function auto(time) {
        setInterval(function() {
            slide();
        }, time)
    }   
});

Answer 1

Есть куча проблем:

1. Вы не инициализируете свой setInterval так что он запускается только при запуске mouseleave событие.
2. Каждый раз mouseleave событие срабатывает, вы начинаете новый setInterval так что вы, вероятно, в конечном итоге будете иметь несколько бегов одновременно.
3. Ваше желаемое поведение заключается в том, что при наведении курсора на изображение слайдер останавливается, но у вас нет ничего для этого.

Как это: http://jsfiddle.net/BYossarian/uLAYB/

var img = 0,
    pic = ['nature', 'grass', 'earth', 'fall', 'fall2'],
    slider = $('img.slide_img'),
    timerID = 0,
    delay = 2000;

function slide() {
    slider.attr('src', 'http://placehold.it/200x200&text=' + pic[img]);
    img++;
    if (img >= pic.length) {
        img = 0;
    }
}

slider.on('mouseleave', function () {
    clearTimeout(timerID);
    auto();
});

slider.on('mouseenter', function () {
    clearTimeout(timerID);
});

slider.on('click', function () {
    clearTimeout(timerID);
    slide();
});

function auto() {
    timerID = setTimeout(function () {
        slide();
        auto();
    }, delay);
}

auto();

Обратите внимание, что я использую clearTimeout для предотвращения одновременного запуска нескольких тайм-аутов:

https://developer.mozilla.org/en-US/docs/Web/API/window.clearTimeout