jquery - 如何让 jQuery 幻灯片在鼠标悬停时暂停？

Question

就目前情况而言，这个问题不太适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、民意调查或扩展讨论。如果您觉得这个问题可以改进并可能重新开放， visit the help center以获得指导。

已关闭 10 年前。

下面是代码...

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);

        });});

Answer 1

我在jsfiddle上放了一个简单的例子。下次别忘了上传您的样式和 html 代码。 (我随机生成)

http://jsfiddle.net/ppFrE/14/

<div id="bigPic">
<img src="http://www.google.com/logos/2012/uganda12-hp.jpg">
<img src="http://www.google.com/logos/2012/janusz-korczak-2012-hp.jpg">
<img src="http://www.google.com/logos/2012/Brazil_Elections-2012-hp.jpg">
</div>
<ul id="thumbs">
    <li><img src="http://www.google.com/logos/2012/uganda12-hp.jpg"></li>
    <li><img src="http://www.google.com/logos/2012/janusz-korczak-2012-hp.jpg"></li>
    <li><img src="http://www.google.com/logos/2012/Brazil_Elections-2012-hp.jpg"></li>
</ul>​

这是完整的 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;
    });
});​