如何使用 setInterval 和 clearInterval 制作简单的幻灯片 jQuery

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
    // 

});

顺便说一句：我必须使用 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);

});