javascript - 悬停时如何暂停幻灯片放映

将鼠标悬停在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);
}

最佳答案

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/