如何让jQuery幻灯片在MouseOver上暂停？

下面是代码

var currentImage;

var currentIndex = -1;

var interval;function showImage(index){if(index < $('#bigPic img').length){    

var indexImage = $('#bigPic img')[index]

            if(currentImage){   

            if(currentImage != indexImage ){

                    $(currentImage).css('z-index',2);

                    clearTimeout(myTimer);

                    $(currentImage).fadeOut(600, function() {myTimer = setTimeout("showNext()", 10000);$(this).css({'display':'none','z-index':1})});

                }
            }
            $(indexImage).css({'display':'block', 'opacity':1});

            currentImage = indexImage;

            currentIndex = index;

            $('#thumbs li').removeClass('active');

            $($('#thumbs li')[index]).addClass('active');

        }

    }

    function showNext(){
        var len = $('#bigPic img').length;
        var next = currentIndex < (len-1) ? currentIndex + 1 : 0;
        showImage(next);
    }

    var myTimer;

    $(document).ready(function() {myTimer = setTimeout("showNext()", 14000);showNext(); //loads first image

        $('#thumbs li').bind('click',function(e){

        var count = $(this).attr('rel');

        showImage(parseInt(count)-1);

        });});

var-currentImage；
var currentIndex=-1；
var区间；函数showImage（index）{if（index<$（'#bigPic img'）.length）{
var indexImage=$（'#bigPic img'）[索引]
如果（当前图像）{
如果（currentImage！=索引最大值）{
$（currentImage）.css（'z-index'，2）；
clearTimeout（myTimer）；
$（currentImage）.fadeOut（600，function（）{myTimer=setTimeout（“showNext（）”，10000）；$（this）.css（{'display'：'none'，'z-index'：1}）；
}
}
$（indexImage）.css（{'display'：'block'，'opacity'：1}）；
currentImage=索引最大值；
currentIndex=索引；
$（“#thumbs li”）.removeClass（'active'）；
$（$（'#thumbs li'）[index]）.addClass（'active'）；
}
}
函数showNext（）{
var len=$（'#bigPic img'）。长度；
var next=当前指数<（len-1）？当前指数+1:0；
showImage（下一个）；
}
var-myTimer；
$（document）.ready（函数（）{myTimer=setTimeout（“showNext（）”，14000）；showNext（）；//加载第一个图像
$（'#thumbs li'）.bind（'click'，函数（e）{
var count=$（this.attr（'rel'）；
showImage（parseInt（count）-1）；
});});

在$（文档）上添加悬停。准备好在鼠标悬停时停止计时器，并在鼠标离开时重新启动计时器的事件

$('#thumbs li').hover(function() { 
    clearTimeout(myTimer); 
    }, function() {
    myTimer = setTimeout("showNext()", 14000);
    });

---

我在JSFIDLE上给出了一个简单的示例。下次别忘了上传你的风格和html代码。（我随机生成）

​

下面是一个完整的Javascript代码

var currentImage;
var currentIndex = -1;
var interval;
var myTimer;
var hover = false;

function showImage(index) {
    if (index < $('#bigPic img').length) {
        var indexImage = $('#bigPic img')[index]
        if (currentImage) {
            if (currentImage != indexImage) {
                $(currentImage).css('z-index', 2);
                clearTimeout(myTimer);
                $(currentImage).fadeOut(600, function() {
                    if (!hover) myTimer = setTimeout(showNext, 1000);
                    $(this).css({
                        'display': 'none',
                        'z-index': 1
                    })
                });
            }
        }
        $(indexImage).css({
            'display': 'block',
            'opacity': 1
        });
        currentImage = indexImage;
        currentIndex = index;
        $('#thumbs li').removeClass('active');
        $($('#thumbs li')[index]).addClass('active');
    }
}

function showNext() {
    var len = $('#bigPic img').length;
    var next = currentIndex < (len - 1) ? currentIndex + 1 : 0;
    showImage(next);
}

$(document).ready(function() {
    myTimer = setTimeout(showNext, 1000);
    showNext(); //loads first image
    $('#thumbs li').bind('click', function(e) {
        var count = $(this).attr('rel');
        showImage(parseInt(count) - 1);
    });
    $('#bigPic img').hover(function() { 
        hover = true;
        clearTimeout(myTimer); 
    }, function() {
        myTimer = setTimeout(showNext, 1000);
        hover = false;
    });
});​

var-currentImage；
var currentIndex=-1；
var区间；
var-myTimer；
var hover=false；
函数showImage（索引）{
如果（索引<$（'bigPic img'）。长度）{
var indexImage=$（'#bigPic img'）[索引]
如果（当前图像）{
如果（currentImage！=索引最大值）{
$（currentImage）.css（'z-index'，2）；
clearTimeout（myTimer）；
$（currentImage）.fadeOut（600，函数（）{
如果（！hover）myTimer=setTimeout（showNext，1000）；
$（this.css）({
“显示”：“无”，
“z索引”：1
})
});
}
}
$（indexImage）.css({
“显示”：“块”，
“不透明度”：1
});
currentImage=索引最大值；
currentIndex=索引；
$（“#thumbs li”）.removeClass（'active'）；
$（$（'#thumbs li'）[index]）.addClass（'active'）；
}
}
函数showNext（）{
var len=$（'#bigPic img'）。长度；
var next=当前指数<（len-1）？当前指数+1:0；
showImage（下一个）；
}
$（文档）.ready（函数（）{
myTimer=setTimeout（showNext，1000）；
showNext（）；//加载第一个图像
$（'#thumbs li'）.bind（'click'，函数（e）{
var count=$（this.attr（'rel'）；
showImage（parseInt（count）-1）；
});
$（'#bigPic img'）。悬停（函数（）{
悬停=真；
clearTimeout（myTimer）；
}，函数（）{
myTimer=setTimeout（showNext，1000）；
悬停=错误；
});
});​

对不起，我不知道这是怎么回事。你介意给我看一下悬停功能的全部代码吗？“谢谢你花时间来回答，@MinimeI给出了更详细的例子。”。看一看。它显示了原始答案的更多细节。

var currentImage;
var currentIndex = -1;
var interval;
var myTimer;
var hover = false;

function showImage(index) {
    if (index < $('#bigPic img').length) {
        var indexImage = $('#bigPic img')[index]
        if (currentImage) {
            if (currentImage != indexImage) {
                $(currentImage).css('z-index', 2);
                clearTimeout(myTimer);
                $(currentImage).fadeOut(600, function() {
                    if (!hover) myTimer = setTimeout(showNext, 1000);
                    $(this).css({
                        'display': 'none',
                        'z-index': 1
                    })
                });
            }
        }
        $(indexImage).css({
            'display': 'block',
            'opacity': 1
        });
        currentImage = indexImage;
        currentIndex = index;
        $('#thumbs li').removeClass('active');
        $($('#thumbs li')[index]).addClass('active');
    }
}

function showNext() {
    var len = $('#bigPic img').length;
    var next = currentIndex < (len - 1) ? currentIndex + 1 : 0;
    showImage(next);
}

$(document).ready(function() {
    myTimer = setTimeout(showNext, 1000);
    showNext(); //loads first image
    $('#thumbs li').bind('click', function(e) {
        var count = $(this).attr('rel');
        showImage(parseInt(count) - 1);
    });
    $('#bigPic img').hover(function() { 
        hover = true;
        clearTimeout(myTimer); 
    }, function() {
        myTimer = setTimeout(showNext, 1000);
        hover = false;
    });
});​