자바 스크립트 타이머 - 지우기, 새 설정, div를 통한 순환

Question

한 번에 하나씩 표시하고 10 초마다 변경되는 n div 태그를 순환하는 JavaScript가 있습니다. 이것은 작동 중입니다. 하지만 다음 버튼과 이전 버튼도 있습니다. 그들은 다음 또는 이전을 클릭하면 한 div를 건너 뛰는 것 같습니다.

누군가 도움을 줄 수 있습니까?

더 나은 방법에 대한 제안도 환영합니다. 나는 jQuery를 처음 사용하기 때문에 어쨌든 내가하고 싶은 몇 가지 개선점을 알고 있습니다. 감사!!!

jQuery(document).ready(function() { 
    var counter = 1; 
    var delay = 3000; //10 seconds = 10000 
    var lastItem = jQuery('table[id^=featuredNo]').length - 1; 
    var previous = 0; 
    var timerID; 

    //argument is increment 
    //false is decrement 
    function updateCounter(increment) { 
     if (increment) { 
      counter = (counter >= lastItem) ? 0 : counter + 1; 
      previous = (previous >= lastItem) ? 0 : previous + 1; 
     } else { 
      counter = (counter <= 0) ? lastItem : counter - 1; 
      previous = (previous <= 0) ? lastItem : previous - 1; 
     } 
    } 

    function displayNext() { 
     //alert("testt" + counter); 

     //hide everything but current 
     jQuery("table[id^=featuredNo]").hide(); 
     jQuery("#featuredNo" + counter).show(); 

     //incrememnt the counter, so next time we show the next one 
     updateCounter(true); 
    }; 

    //set click handlers for previous 
    jQuery('a[id^=featuredPrevious]').click(function() { 
     clearInterval(timerID); 

     updateCounter(false); 

     displayNext(); 
     timerID = setInterval(displayNext, delay); 
    }); 

    //set click handlers for next 
    jQuery('a[id^=featuredNext]').click(function() { 
     clearInterval(timerID); 

     updateCounter(true); 

     displayNext(); 
     timerID = setInterval(displayNext, delay); 
    }); 


    //start interval 
    timerID = setInterval(displayNext, delay); 
}); 

Answer 1

가장 간단한 솔루션은 이전 버튼 핸들러 (false)를 다른 updateCounter를 다음 단추 처리기에서 (사실) updateCounter을 제거하고, 추가 :

//set click handlers for previous 
jQuery('a[id^=featuredPrevious]').click(function() { 
    clearInterval(timerID); 

    updateCounter(false); 
    updateCounter(false); 

    displayNext(); 
    timerID = setInterval(displayNext, delay); 
}); 

//set click handlers for next 
jQuery('a[id^=featuredNext]').click(function() { 
    clearInterval(timerID); 

    displayNext(); 
    timerID = setInterval(displayNext, delay); 
});