jQuery滑塊，如何在鼠標懸停時暫停自動播放？

Question

夥計們，我不擅長編碼，這個小小的劇本真的讓我非常困擾。 我有一個自動播放滑塊，這是正常工作。但是我需要有人幫助我在鼠標懸停時暫停自動播放。 另外，有人可以找到一種方法來播放第一張幻燈片，當它到達最後一張幻燈片，而不是回滾到第一張幻燈片？ 非常感謝。這裏是代碼：

$(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

我不是專家，所以無論這個答案可能是錯的，但你試過用.hover功能它可能看起來像這樣的玩弄。

$('#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();