간단한 슬라이드 쇼에서는 setInterval 및 위해 clearInterval을 사용하는 방법 jQuery를 두 가지 "기능"을 가지고

Question

i managed to get a simple slideshow working :

• 자동으로 따라 표시를 클릭에서 원하는 이미지를 보여주는 다음 이미지

• 에 슬라이딩

간격은 5 초 후에 다음 이미지를 표시하도록 설정됩니다. 그러나 표시기를 클릭하여 특정 이미지를 선택하면이 타이머가 재설정되어 다음 이미지가 표시되기 전에 5 초 동안 원하는 이미지를 표시 할 수 있습니다. BTW

$('#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); 

});