3

这是下面的代码...

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

        });});
4

2 回答 2

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;
    });
});​
于 2012-10-10T01:33:42.410 回答
0

在 $(document).ready 事件上添加悬停以在鼠标悬停时停止计时器并在鼠标离开时重新启动计时器。

$('#thumbs li').hover(function() { 
    clearTimeout(myTimer); 
    }, function() {
    myTimer = setTimeout("showNext()", 14000);
    });
于 2012-10-10T00:45:37.953 回答