마우스 아웃시 재개 기능

Question

javascript/jQuery가있는 페이지에서 작업 중이며 거의 완료되었습니다. 나는 회전하는 내용 (함수 'rotatecontent')과 관련 버튼이있을 때 회전하는 내용의 위치에 나타나는 div를 가지고 있다고 가정합니다. 버튼에서 마우스를 가져 가면 모든 div 콘텐츠가 사라지고 원래의 rotatecontent 함수가 재개되지 않는 것을 제외하고는이 모든 작업을 완료했습니다. 사용자가 버튼에서 멀리 이동하면 다시 시작하는 기능을 구현해야합니다. 여기에 내 JS입니다 : 여기

<script type="text/javascript"> 

var messages; 
var curcontentindex = 0; 
var prevcontentindex; 
var futcontentindex; 
var i; 



function rotatecontent() { 
messages.hide(); 
curcontentindex = (curcontentindex < messages.length - 1) ? curcontentindex + 1 : 0; 
messages.get(curcontentindex).style.display = "block"; 
} 


$(function() { 
messages = $('.dyncontent').find('div'); 
i = setInterval(rotatecontent, 1000); 


$('li').hover(
function() { 
$(this).addClass("hover"); 
clearInterval(i); // when mouse is over object 
}, 
function() { 
$(this).removeClass("hover"); 
setInterval(rotatecontent, 1000); //when mouse is no longer over object 
} 
); 

}); 




</script> 

그리고 나의 HTML입니다 :

<div class="dyncontent"> 
<div id="div1">Be A Billiken </div> 
<div id="div2" style="display:none">Be A Billiken 2</div> 
<div id="div3" style="display:none">Be A Billiken 3</div> 
<div id="div4" style="display:none">Be A Billiken 4</div> 
<div id="div5" style="display:none">Be A Billiken 5</div> 
</div> 



<ul id="container" overflow:hidden> 

<li><a href="#" onMouseOver="$('div.dyncontent').replaceWith($('#div1').show());" onMouseOut=""><img  src="../Work/Images/BAB.com_web_link_10.jpg" width="250" height="100" class="Bab-image"></a></li> 


<li><a href="#" onMouseOver="$('div.dyncontent').replaceWith($('#div2').show());" onMouseOut=""><img  src="../Work/Images/SLU_on_the_Road.jpg" class="sluotr-image"> </a></li> 

<li><a href="#" onMouseOver="$('div.dyncontent').replaceWith($('#div3').show());"  onMouseOut=""><img src="http://slu.edu/Images/graduate/Billiken_Blogs.jpg" class="blogs- image"></a></li> 

<li ><a href="#" onMouseOver="$('div.dyncontent').replaceWith($('#div4').show());"  onMouseOut=""><img src="http://slu.edu/Images/graduate/SLU_Chat.jpg" class="chat-image"> </a></li> 

<li><a href="#" onMouseOver="$('div.dyncontent').replaceWith($('#div5').show());"  onMouseOut=""><img src="http://slu.edu/Images/graduate/Viewbook_Button_2011.jpg"  class="view-image"></a> 
</li> 

</ul> 

Answer 1

JQuery와 .hover() 함수는 특별한 마우스가 개체 위에되면 어떻게됩니까 설정할 수 있습니다 구조, 무엇을 가지고 마우스가 더 이상 객체를 가리키면 발생합니다.

$(".class").hover(
    function() { 
    $(this).addClass("hover"); // when mouse is over object 
    }, 
    function() { 
    $(this).removeClass("hover"); //when mouse is no longer over object 
    } 
); 

원래 설정을 저장하고