Jquery 单击重置间隔

我见过类似的问题，但我认为我见过的任何一个都不行。Mine涉及在多个功能上同时重置间隔。这是一个带有小导航按钮的渐弱幻灯片。我可以让按钮工作，但我希望幻灯片在幻灯片上停留一段时间（4.5秒），然后从那里继续，而不是跳到它所在的位置。希望这是有道理的。非常感谢您的帮助

$(document).ready(function () {

        $("#slider div:gt(0), #slideinfo p:gt(0)").fadeOut()

        $("#circleholder div.circle1").click(circle1)   
        $("#circleholder div.circle2").click(circle2)
        $("#circleholder div.circle3").click(circle3)
        $("#circleholder div.circle4").click(circle4)
        $("#circleholder div.circle5").click(circle5)



            setInterval(function timer(){
                circle1();
            },22500);
        setTimeout(function () {
                circle2();  
            setInterval(function timer(){
                circle2();
            },22500);                   
        }, 4500);

        setTimeout(function () {
                circle3();
            setInterval(function timer(){
                circle3();
            },22500);                   
        }, 9000);

        setTimeout(function () {
                circle4();
            setInterval(function timer(){
                circle4();
            },22500);   
        }, 13500);

        setTimeout(function () {
                circle5();
            setInterval(function timer(){
                circle5();
            },22500);
        }, 18000);


        function circle1 () {       
            $("#slider div.slide, #slideinfo p").fadeOut(1000)
            $("#slider div:eq(0), #slideinfo p:eq(0)").fadeIn(1000)
            $("*").removeClass("activecircle")
            $("#circleholder div.circle1").addClass("activecircle")
        };

        function circle2 () {       
            $("#slider div.slide, #slideinfo p").fadeOut(1000)
            $("#slider div:eq(1), #slideinfo p:eq(1)").fadeIn(1000)
            $("*").removeClass("activecircle")
            $("#circleholder div.circle2").addClass("activecircle")
        };

        function circle3 () {       
            $("#slider div.slide, #slideinfo p").fadeOut(1000)
            $("#slider div:eq(2), #slideinfo p:eq(2)").fadeIn(1000)
            $("*").removeClass("activecircle")
            $("#circleholder div.circle3").addClass("activecircle")
        };

        function circle4 () {       
            $("#slider div.slide, #slideinfo p").fadeOut(1000)
            $("#slider div:eq(3), #slideinfo p:eq(3)").fadeIn(1000)
            $("*").removeClass("activecircle")
            $("#circleholder div.circle4").addClass("activecircle")
        };

        function circle5 () {       
            $("#slider div.slide, #slideinfo p").fadeOut(1000)
            $("#slider div:eq(4), #slideinfo p:eq(4)").fadeIn(1000)
            $("*").removeClass("activecircle")
            $("#circleholder div.circle5").addClass("activecircle")
        };


});

试试这个：

我刚刚写了迷你幻灯片，它是可扩展的，你不需要手动编写事件

var btns = $('.btns'),
    cont = $('.slideshow'),
    slides = cont.find('.slide'),
    index = slides.filter('.show').index() || 0,
    delay = 1,
    duration = 1,
    timer;

slides.eq(index).addClass('show');
createDots();
selectDot();
addEvents();

function createDots(){
  var n = slides.length, dots = btns.children('.dots');
  while (n--) dots.append($('<div class="dot">'));  
}

function selectDot(){
  btns.find('.dots .dot').removeClass('active')
    .eq(index).addClass('active');
}

function addEvents() {
  btns.find('.prev').click(function(){
    index = --index; 
    if (index<0) index=slides.length-1;
    updateSlides();
  });
  btns.find('.next').click(function(){
    index = ++index % slides.length; 
    updateSlides();
  });
  btns.find('.dot').click(function(){
    index =  $(this).index();
    updateSlides();
  });
}

function updateSlides() {
  selectDot(); 
  clearTimeout(timer);
  timer = setTimeout(function(){
    slides.not('.show').hide();
   slides.filter('.show').removeClass('show')
    .stop().fadeOut(duration*1000);
    slides.eq(index).fadeIn(duration*1000).addClass('show');
  },delay*1000);
}

var btns=$（'.btns'），
续=$（'.slideshow'），
幻灯片=继续查找（'.slide'），
index=slides.filter（'.show'）.index（）| | 0，
延迟=1，
持续时间=1，
定时器；
slides.eq（index.addClass（'show'）；
createDots（）；
选择点（）；
addEvents（）；
函数createDots（）{
var n=幻灯片长度，点=BTN.子项（'.dots'）；
而（n--）点。追加（$（''）；
}
函数selectDot（）{
btns.find（'.dots.dot'）.removeClass（'active'））
.eq（索引）.addClass（“活动”）；
}
函数addEvents（）{
btns.find（'.prev'）。单击（函数（）{
指数=--指数；
if（index）
clearInterval
函数很可能是您想要做的事情。我想可能是这样，但我不确定在这个例子中如何实现它。步骤应该是：
单击事件发生->清除原始间隔->设置新间隔