jquery - jQueryスライドショーをマウスオーバーで一時停止するにはどうすればよいですか？

Question

以下のコードは次のとおりです...

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

Answer 2

$（document）.readyイベントにホバーを追加して、マウスがホバリングしているときにタイマーを停止し、マウスが外れているときにタイマーを再開します。

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