Question

现在我正在开发一个新闻滑块，它可以正常运行

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);

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

});

谢谢 Trevor

Answer 2

clearTimeout()应该为你做。例如

$(document).on('click', '.list_items li',  function(){
 clearTimeout(time_id);  // should clear it for you
 .....
 seeker();
 time_id = setTimeout(Rotate, 4000); // Now you can start it up again on the appropriate rotate. 
});

<强>更新

现在你只需要想出一种方法来调用适当的旋转功能，具体取决于你所使用的图像。

单击后如何重置旋转时间

2 个答案: