jQuery 슬라이더, 마우스 오버시 자동 재생을 일시 중지하려면 어떻게해야하나요?

Question

얘들 아, 나는 코딩에 능숙하지 못하다. 그리고이 작은 스크립트는 정말로 나를 괴롭힌다. 자동 재생 기능이있는 슬라이더가 있는데 제대로 작동합니다. 하지만 마우스를 올리면 자동 재생을 일시 중지하도록 도와 줄 사람이 필요합니다. 또한 첫 번째 슬라이드로 돌아가는 대신 마지막 슬라이드에 도달하면 첫 번째 슬라이드를 재생할 방법을 찾을 수 있습니까? 정말 고마워요. 나도 그래서이 답이 틀렸을 수도있는 전문가는 아니지만 그러나 당신이 이런 식으로 뭔가처럼 보일 수 .hover 기능을 장난 노력이

$(document).ready(function(){ 
     var currentPosition = 0; 
     var slideWidth = 560; 
     var slides = $('.slide'); 
     var numberOfSlides = slides.length; 

     // --- autoshow --------- 
     function autoshow(){ 
     //alert('start'); 
     currentPosition = currentPosition+1 ; 
     if(currentPosition==numberOfSlides){ 
     currentPosition=0; 
     } 
     // Hide/show controls 
     manageControls(currentPosition); 
     // Move slideInner using margin-left 
     $('#slideInner').animate({ 
     'marginLeft' : slideWidth*(-currentPosition) 
     }); 
     timeOut = setTimeout(autoshow, 3000); 
     } 
     timeOut = setTimeout(autoshow, 3000); 
     // ----autoshow ----------- 

     // Remove scrollbar in JS 
     $('#slidesContainer').css('overflow', 'hidden'); 

     // Wrap all .slides with #slideInner div 
     slides 
     .wrapAll('<div id="slideInner"></div>') 
     // Float left to display horizontally, readjust .slides width 
     .css({ 
      'float' : 'left', 
      'width' : slideWidth 
     }); 

     // Set #slideInner width equal to total width of all slides 
     $('#slideInner').css('width', slideWidth * numberOfSlides); 

     // Insert controls in the DOM 
     $('#slideshow') 
     .prepend('<span class="control" id="leftControl">Clicking moves left</span>') 
     .append('<span class="control" id="rightControl">Clicking moves right</span>'); 

     // Hide left arrow control on first load 
     manageControls(currentPosition); 

     // Create event listeners for .controls clicks 
     $('.control') 
     .bind('click', function(){ 
     // Determine new position 
     currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1; 

     // Hide/show controls 
     manageControls(currentPosition); 
     // Move slideInner using margin-left 
     $('#slideInner').animate({ 
      'marginLeft' : slideWidth*(-currentPosition) 
     }); 
     }); 

     // manageControls: Hides and Shows controls depending on currentPosition 
     function manageControls(position){ 
     // Hide left arrow if position is first slide 
     if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() } 
     // Hide right arrow if position is last slide 
     if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() } 
     } 
    }); 

Answer 1

: 그리고 여기에 코드입니다.

$('#slideInner').hover(function() { 
     $('#slideInner').stop(); 
     clearTimeout(ticker_timeout);  

또는이

$("#slideInner") 
     // when mouse enters, clear the timer if it has been set 
     .mouseenter(function() { 
      if (timer) { clearInterval(timer) } 
     }) 
     // when mouse goes out, start the slideshow 
     .mouseleave(function() { 
      timer = setInterval(function() { 
       $("#slideInner > div:first") 
       .fadeOut(1000) 
       .next() 
       .fadeIn(1000) 
       .end() 
       .appendTo("#slideInner"); 
     }, 3000); 
    }) 
    // trigger mouseleave for initial slideshow starting 
    .mouseleave(); 

같은