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

如何使jQuery幻灯片暂停onmouseover？

2 个答案: