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();