Question

有人可以协助我尝试使用此示例暂停悬停。基本上我需要它来做以下事情。

暂停区间悬停
突出显示项目悬停在
on hover out resume rotate

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

Working DEMO

您可能需要稍微调整一下以符合您的要求。基本上，这个想法是清除鼠标上的间隔并在mouseout＆amp ;;保持对计数的引用。

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

Fiddle

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

demo

在悬停时添加暂停到jQuery

3 个答案: