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

有很多问题：

您不会初始化setInterval，只会在触发mouseleave事件时启动。
每次触发mouseleave事件时，您都会启动一个新的setInterval，这样您最终可能会同时运行多个。{/ li>
您希望的行为是，将鼠标悬停在图像上会停止滑块，但您没有任何操作可以执行此操作。

这是怎么回事：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

图像滑块非正常工作

1 个答案: