javascript - 点击后如何重置旋转时间

Question

现在我正在开发一个新闻 slider ，它可以正常工作，没有任何问题

Slider有5个图标可以跳转到某个新的，这里就出现问题了。

旋转时间是4秒，当我点击图标时，它会跳到新的，但时间不是从头开始，它会完成4秒的剩余时间并旋转到下一个

我希望它从头开始，位于旋转代码下方

time_id = setTimeout(Rotate, 4000);

function Rotate() {

    var class_name = $('.list_items li').eq(0).attr('class');

    var class_name_2 = $('li.small_to_large').removeClass('small_to_large').attr('class');  
    $('.' + class_name_2).css({display: 'block'});

    $('.' + class_name).before($('.' + class_name_2));

    $('.' + class_name).addClass('small_to_large');
    $('.' + class_name).css({display:'none'});

    $('div.large-12').before($('.' + class_name));

    $('.one-slide img').attr('src',$('li.small_to_large img').attr('src'));
    $('.one-slide h1').html($('.small_to_large h1').html());
    $('.one-slide p.small_desc').html($('.small_to_large p.small_desc').html());
    $('.one-slide p.disc').html($('.small_to_large p.disc').html());

    seeker();
    time_id = setTimeout(Rotate_1, 4000);
}
function Rotate_1() {

    var class_name = $('.list_items li').eq(0).next().attr('class');

    var class_name_2 = $('li.small_to_large').removeClass('small_to_large').attr('class');  
    $('.' + class_name_2).css({display: 'block'});

    $('.' + class_name).before($('.' + class_name_2));

    $('.' + class_name).addClass('small_to_large');
    $('.' + class_name).css({display:'none'});

    $('div.large-12').before($('.' + class_name));

    $('.one-slide img').attr('src',$('li.small_to_large img').attr('src'));
    $('.one-slide h1').html($('.small_to_large h1').html());
    $('.one-slide p.small_desc').html($('.small_to_large p.small_desc').html());
    $('.one-slide p.disc').html($('.small_to_large p.disc').html());

    seeker();
    time_id = setTimeout(Rotate_2, 4000);
}
function Rotate_2() {

    var class_name = $('.list_items li').eq(0).next().next().attr('class');

    var class_name_2 = $('li.small_to_large').removeClass('small_to_large').attr('class');  
    $('.' + class_name_2).css({display: 'block'});

    $('.' + class_name).before($('.' + class_name_2));

    $('.' + class_name).addClass('small_to_large');
    $('.' + class_name).css({display:'none'});

    $('div.large-12').before($('.' + class_name));

    $('.one-slide img').attr('src',$('li.small_to_large img').attr('src'));
    $('.one-slide h1').html($('.small_to_large h1').html());
    $('.one-slide p.small_desc').html($('.small_to_large p.small_desc').html());
    $('.one-slide p.disc').html($('.small_to_large p.disc').html());

    seeker();
    time_id = setTimeout(Rotate_3, 4000);
}
function Rotate_3() {

    var class_name = $('.list_items li').eq(0).next().next().next().attr('class');

    var class_name_2 = $('li.small_to_large').removeClass('small_to_large').attr('class');  
    $('.' + class_name_2).css({display: 'block'});

    $('.' + class_name).before($('.' + class_name_2));

    $('.' + class_name).addClass('small_to_large');
    $('.' + class_name).css({display:'none'});

    $('div.large-12').before($('.' + class_name));

    $('.one-slide img').attr('src',$('li.small_to_large img').attr('src'));
    $('.one-slide h1').html($('.small_to_large h1').html());
    $('.one-slide p.small_desc').html($('.small_to_large p.small_desc').html());
    $('.one-slide p.disc').html($('.small_to_large p.disc').html());

    seeker();
    time_id = setTimeout(Rotate, 4000);
}

function seeker(){
    $('.one-slide .seeker i').animate({width: '100%'},4000, function() {
        $('.one-slide .seeker i').css({width: 0});
    });
}

图标点击代码

$(document).on('click', '.list_items li',  function(){

    var class_name = $(this).attr('class');

    var class_name_2 = $('li.small_to_large').removeClass('small_to_large').attr('class');  
    $('.' + class_name_2).css({display: 'block'});

    $('.' + class_name).before($('.' + class_name_2));

    $('.' + class_name).addClass('small_to_large');
    $('.' + class_name).css({display:'none'});

    $('div.large-12').before($('.' + class_name));


    $('.one-slide img').attr('src',$('li.small_to_large img').attr('src'));
    $('.one-slide h1').html($('.small_to_large h1').html());
    $('.one-slide p.small_desc').html($('.small_to_large p.small_desc').html());
    $('.one-slide p.disc').html($('.small_to_large p.disc').html());

    $('.one-slide .seeker i').css({width: 0});
    seeker();

});

提前致谢:)

Answer 1

这段代码工作正常:)

$(document).on('click', '.list_items li',  function(){

    clearTimeout(time_id);
    $('.one-slide .seeker i').stop( true, true );
    seeker();
    time_id = setTimeout(Rotate, 4000);

    ................................
    ................................

});

谢谢你特雷弗