0

下面的代码不能正常工作。我想要一个每 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)
    }   
});
4

1 回答 1

0

有一堆问题：

  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

于 2013-10-06T21:13:09.327 回答