Как использовать setInterval и clearInterval для простого слайд-шоу jQuery - PullRequest
Новая
       27

Как использовать setInterval и clearInterval для простого слайд-шоу jQuery

0 голосов
/ 23 сентября 2011

мне удалось получить простое слайд-шоу, работающее , которое имеет две основные "особенности":

  • , автоматически переходя к следующему изображению

  • показывает желаемое изображение при нажатии соответствующего индикатора

интервал устанавливается для отображения следующего изображения через 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
    // 

});

Кстати: я должен использовать jquery1.2.1, другая версия невозможна.

большое спасибо

1 Ответ

0 голосов
/ 23 сентября 2011 
$('#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);

});
...