How to use setInterval and clearInterval for a simple slideshow jQuery

Question

i managed to get a simple slideshow working that has two main "features":

• automatically sliding to the next image

• showing the desired image on clicking the according indicator

the interval is set to display the next image after 5 seconds. however, when i choose a specific image by clicking its indicator, this timer should be reset so i can display the desired image for 5 seconds before the next image is shown. right now the timer is not reset and it might happen that i can only look at the image for a very short time... so far i have the following:

$('#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: i have to use jquery 1.2.1, no other version possible.

thanks a lot

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

});