如何在懸停時暫停幻燈片

Question

當我將鼠標懸停在jQuery幻燈片的圖像上時，如何添加暫停效果？

$(document).ready(function() { 
    slideShow(); 
}); 

function slideShow() { 
    var showing = $('#slideshow .show'); 
    var next = showing.next().length ? showing.next() : showing.parent().children(':first'); 
    var timer; 
    showing.fadeOut(500, function() { 
     next.fadeIn(200).addClass('show'); 
    }).removeClass('show'); 
    setTimeout(slideShow, 3000); 
} 

Answer 1

使用.delay()，這將有助於。

描述：設置一個計時器來延遲隊列中後續項目的執行。

Answer 2

var hovering = false;    //default is not hovering 
$("#slideshow").hover(function() { //*replace body with your element 
    hovering = true;    //when hovered, hovering is true 
}, function() { 
    hovering = false;    //when un-hovered, hovering is false 
    slideShow();     //start the process again 
}); 

function slideShow() { 
    if(!hovering) {     //if not hovering, proceed 
     /* Your code here*/ 
     nextSlide(); 
     setTimeout(slideShow, 1000); 
    } 
} 

function nextSlide(){ 
    var showing = $('#slideshow .show'); 
    var next = showing.next().length ? showing.next() : showing.parent().children(':first'); 
    var timer; 
    showing.fadeOut(500, function() { 
     next.fadeIn(200).addClass('show'); 
    }).removeClass('show'); 
} 

演示：http://jsfiddle.net/DerekL/mqEbZ/

Answer 3

我認爲你需要爲兩個功能......放幻燈片（）和其他人說pauseSlideshow（）...現在所說的幻燈片（）鼠標移開時的事件和調用的mouseenter pauseSlideShow（）

你的代碼應該是這樣的

$(document).ready(function(){ 

$('.slider').mouseout(slideShow()); 
$('.slider').mouseenter(pauseSlideShow()); 
}); 
function slideShow() { 
var showing = $('#slideshow .show'); 
var next = showing.next().length ? showing.next() : showing.parent().children(':first'); 
var timer; 
showing.fadeOut(500, function() { next.fadeIn(200).addClass('show'); }).removeClass('show');  
timeOut = setTimeout(slideShow, 3000);   
} 

function PauseSlideShow() { 
window.clearTimeout(timeOut); 
} 

TRY IT

Answer 4

工作過德里克的回答，徘徊另一種是使用mouseenter和mouseleave。

見工作幻燈片的jsfiddle：演示：http://jsfiddle.net/highwayoflife/6kDG7/

var hovering = false; 
var slideshow = $("#slideshow"); 

slideshow.mouseenter(function() { 
    hovering = true; 
}).mouseleave(function() { 
    hovering = false; 
    slideShow(); 
}); 

function slideShow() { 
    if (!hovering) { 
     # Some browsers don't interpret "display:block" as being visible 
     # If no images are deemed visible, choose the first... 
     var currentImg = (slideshow.children("img:visible").length) ? slideshow.children("img:visible") : slideshow.children("img:first"); 
     var nextImg = (currentImg.next().length) ? currentImg.next() : slideshow.children("img:first"); 

     currentImg.fadeOut(500, function() { 
      nextImg.fadeIn(500, function() { 
       setTimeout(slideShow, 2000); 
      }); 
     }); 
    } 
} 
$(document).ready(function() { 
    slideShow(); 
});