이미지를 일시 중지하는 방법 JQuery에서 이미지를 마우스로 움직이는 방법

Question

이미지를 일시 중지하려면 onmouseover 이미지를 탐색하고 탐색 버튼을 표시해야합니다.

이

내 코드입니다 :

<script> 

    $("#slideshow > div:gt(0)").hide(); 

    setInterval(function() { 
     $('#slideshow > div:first') 
     .fadeOut(1000) 
     .next() 
     .fadeIn(1000) 
     .end() 
     .appendTo('#slideshow'); 
    }, 3000); 

</script> 

<style type="text/css"> 
    #slideshow { 
    margin: 50px auto; 
    position: relative; 
    width: 240px; 
    height: 240px; 
    padding: 10px; 
    box-shadow: 0 0 20px rgba(0,0,0,0.4); 
} 

#slideshow > div { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    right: 10px; 
    bottom: 10px; 
} 
</style> 
<div id="slideshow"> 
    <div> 
    <a class="product_rowimage" id="den" href="javascript::void('0');" title=""> 
    <img src="http://farm6.static.flickr.com/5224/5658667829_2bb7d42a9c_m.jpg"> 
    </a> 
    </div> 
    <div> 
    <a class="product_rowimage" id="den" href="javascript::void('0');" title=""> 
    <img src="http://farm6.static.flickr.com/5230/5638093881_a791e4f819_m.jpg"> 
    </a> 
    </div> 
</div> 

Answer 1

가 편집 스크립트

$("#slideshow > div:gt(0)").hide(); 
    var intervalID = null; 
    function StartSlide() { 
     intervalID = setInterval(function() { 
      $('#slideshow > div:first') 
     .fadeOut(200) 
     .next() 
     .fadeIn(200) 
     .end() 
     .appendTo('#slideshow'); 
     }, 500); 
    } 
    StartSlide(); 
    $("#slideshow").hover(function() { 
     if (intervalID != null) { 
      clearInterval(intervalID); 
      intervalID = null; 
     } 
     // Add the showing of Nav Buttons here 
     // Had no example of your nav buttons 
    }, function() { 
     if (intervalID == null) { 
      StartSlide() 
     } 
    })