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

【问题标题】：pause jQuery slideshow on hover function在悬停功能上暂停 jQuery 幻灯片
【发布时间】：2013-04-25 05:29:42
【问题描述】：

我有这个代码：

$(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() 函数呢？？？

【问题讨论】：

在容器#m_slider

标签： jquery hover slideshow jquery-hover

【解决方案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);
}
});

【讨论】：