在悬停功能上暂停jQuery幻灯片

Question

我有这段代码：

$(function () {
var current = 0,
$imgs = jQuery('#m_slider .ms1');
imgAmount = $imgs.length;

$($imgs.css('position', 'absolute').hide().get(0)).show();


window.setInterval(swapImages, 5000);

function swapImages() {

var $currentImg = $('.ms1:visible');

var $nextImg = $('.ms1:hidden').eq(Math.floor(Math.random() *$('.ms1:hidden').length));
    speed = 500;
// animation speed should be the same for both images so we have a smooth change
$currentImg.fadeOut(speed);
$nextImg.fadeIn(speed);
}
});

这很好用，我想在悬停时暂停我的幻灯片。我在哪里添加.hover（）函数???

Answer 1

你可以尝试这个（未经测试）：

$(function () {
var current = 0, timer,
    $imgs = jQuery('#m_slider .ms1'),
    imgAmount = $imgs.length;

$($imgs.css('position', 'absolute').hide().get(0)).show();

timer = setInterval(swapImages, 5000);

jQuery('#m_slider').mouseenter(function() {
    clearInterval(timer);
}).mouseleave(function() {
    timer = setInterval(swapImages, 5000);
});

function swapImages() {

    var $currentImg = $('.ms1:visible');

    var $nextImg = $('.ms1:hidden').eq(Math.floor(Math.random() *$('.ms1:hidden').length));
    var speed = 500;
    // animation speed should be the same for both images so we have a smooth change
    $currentImg.fadeOut(speed);
    $nextImg.fadeIn(speed);
}
});