jQuery에 마우스를 올리면 포즈가 추가됩니다.

Question

이 예제를 사용하여 마우스를 올려 놓으면 일시 중지를 시도하는 데 누군가 나를 도울 수 있습니까? 본질적으로 다음과 같이해야합니다. 호버

강조 항목에

• 일시 정지 간격을 가져가 밖으로 이력서에
• 맴돌고

코드 (fiddle demo) 회전 :

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

요구 사항에 맞게 약간 조정해야 할 수도 있습니다. 기본적으로 마우스 오버시 간격을 제거하고 마우스 아웃시 재귀를 재개하는 것입니다. & 카운트 수를 유지하십시오.

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