Question

i managed to get a simple slideshow working有两个主要的“功能”：

自动滑动到下一张图片
单击相应指示符

将间隔设置为在5秒后显示下一个图像。但是，当我通过单击其指示器选择特定图像时，应重置此计时器，以便在显示下一个图像之前显示所需图像5秒钟。现在计时器没有重置，可能会发生我只能在很短的时间内查看图像...到目前为止，我有以下内容：

$('#keyvisualslides li:first-child').show();
$('#keyvisualpager li:first-child a').addClass('keyvisualactive');


var reload = setInterval(function(){
    // get position of a element
    var mbr_total = $('#keyvisualpager li a').length;
    var mbr_index = $('#keyvisualpager li .keyvisualactive').parent().prevAll().length;
    var mbr_targetkeyvisual = mbr_index + 2;

    if (mbr_targetkeyvisual > mbr_total) {
        mbr_targetkeyvisual = 1;
    }

    // hide current image and show the target image
    $('#keyvisualslides li:visible').hide();        
    $('#keyvisualslides li:nth-child('+mbr_targetkeyvisual+')').show();

    // remove active class from current indicator and add the same class to target indicator
    $('#keyvisualpager li a').removeClass('keyvisualactive');
    $('#keyvisualpager li:nth-child('+mbr_targetkeyvisual+') a').addClass('keyvisualactive');

}, 5000);


$('#keyvisualpager li a').click(function () { 

    var mbr_index = $(this).parent().prevAll().length;
    var mbr_targetkeyvisual = mbr_index + 1;

    $('#keyvisualslides li:visible').hide();        
    $('#keyvisualslides li:nth-child('+mbr_targetkeyvisual+')').show()

    $('#keyvisualpager li a').removeClass('keyvisualactive');
    $('#keyvisualpager li:nth-child('+mbr_targetkeyvisual+') a').addClass('keyvisualactive');

    //          
    // from now on wait 5 seconds until next image is automatically displayed
    // 

});

btw：我必须使用jquery 1.2.1，没有其他版本。

非常感谢

Answer 1

$('#keyvisualslides li:first-child').show();
$('#keyvisualpager li:first-child a').addClass('keyvisualactive');

function showNextImage(){
    // get position of a element
    var mbr_total = $('#keyvisualpager li a').length;
    var mbr_index = $('#keyvisualpager li .keyvisualactive').parent().prevAll().length;
    var mbr_targetkeyvisual = mbr_index + 2;

    if (mbr_targetkeyvisual > mbr_total) {
        mbr_targetkeyvisual = 1;
    }

    // hide current image and show the target image
    $('#keyvisualslides li:visible').hide();        
    $('#keyvisualslides li:nth-child('+mbr_targetkeyvisual+')').show();

    // remove active class from current indicator and add the same class to target indicator
    $('#keyvisualpager li a').removeClass('keyvisualactive');
    $('#keyvisualpager li:nth-child('+mbr_targetkeyvisual+') a').addClass('keyvisualactive');

}

var reload = setInterval(showNextImage, 5000);


$('#keyvisualpager li a').click(function () { 
    clearInterval(reload);

    var mbr_index = $(this).parent().prevAll().length;
    var mbr_targetkeyvisual = mbr_index + 1;

    $('#keyvisualslides li:visible').hide();        
    $('#keyvisualslides li:nth-child('+mbr_targetkeyvisual+')').show()

    $('#keyvisualpager li a').removeClass('keyvisualactive');
    $('#keyvisualpager li:nth-child('+mbr_targetkeyvisual+') a').addClass('keyvisualactive');

    reload = setInterval(showNextImage, 5000);

});

如何使用setInterval和clearInterval来创建简单的幻灯片jQuery

1 个答案: