1

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

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

});

提前致谢 ：）

4

2 回答 2

1

这段代码工作正常:)

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

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

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

});

谢谢特雷弗_

于 2013-11-09T08:56:36.860 回答
0

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

更新

现在您只需要想出一种方法来根据您所在的图像调用适当的旋转函数。

于 2013-11-07T22:17:55.873 回答