jQuery滑块，鼠标hover时如何暂停自动播放？

伙计们，我不擅长编码，这个小剧本真的很烦我。 我有一个带自动播放function的滑块，效果很好。 但我需要有人帮助我暂停鼠标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('
') // 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('Clicking moves left') .append('Clicking moves right'); // 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();