javascript - 为 jQuery 添加悬停暂停

Question

有人可以帮助我尝试在使用此示例时暂停悬停。基本上我需要它来执行以下操作。

• 悬停间隔
• 突出显示的项目悬停在
• 在悬停时恢复旋转

代码（小提琴演示）：

var $f = $('ul').find('.frame');
function recursive(i) {
    $f.removeClass('showing').eq(i).addClass('showing');
    setTimeout(function () {
        recursive(++i % $f.length)
    }, 1000);
}
recursive(0);

Answer 1

工作演示

您可能需要稍微调整一下以适应您的要求。基本上，这个想法是在鼠标悬停时清除间隔并在鼠标悬停时恢复递归并保留对计数的引用。

var $f = $('ul').find('.frame'),
    timeOut, 
    count; 

function recursive(i) {
    count = i;
    $f.removeClass('showing').eq(i).addClass('showing');
    timeOut = setTimeout(function () {
        recursive(++i % $f.length)
    }, 1000);
}

$('ul li').hover(function(){
    clearTimeout(timeOut);
});

$('ul li').mouseout(function(){
    recursive(count);
});


recursive(0);

Answer 2

添加这个

$(".frame").hover(function () {
    clearTimeout(t);
    console.log(this);
    $(this).addClass("showing");
}, function () {
    recursive(0);
});

小提琴

Answer 3

尝试这个：

var $f = $('ul').find('.frame');
$('ul li').hover(function(){
    $f.removeClass('showing');
    $(this).addClass('showing');
    clearTimeout(timer);
}, function(){
    recursive($(this).index());
});

function recursive(i) {
    $f.removeClass('showing').eq(i).addClass('showing');
    timer = setTimeout(function () {
        recursive(++i % $f.length)
    }, 1000);
}

recursive(0);

演示