Question

我创建了一个jquery滑块。单击下一个或后一个按钮.animate功能用于显示下一个列表项。下一个和上一个按钮都在工作，但现在我希望幻灯片在每x次后自动设置动画。我无法弄清楚jquery超时功能是如何工作的。

current = 0;
current_slide=1;
$(document).ready(function(){
    width=951;
    var totalSlides=$(".slider ul li").length;
    $(".slider ul").removeAttr('width');
    $(".slider ul").attr('width',width*totalSlides);

    $('#next img').click(function(){
        current_slide++;
        current -= width;
        if(current_slide>totalSlides)
            {
                current=0;
                current_slide=1;
                //$(".slider ul").css('left',(totalSlides)*width);  
                $(".slider ul").animate({"left":current+"px"}, "fast");
            }
        else
            $(".slider ul").animate({"left":current+"px"}, "slow");
    });

    $('#prev img').click(function(){
        current_slide--;
        current += width;
        if (current_slide < 1) 
            {
                current = (totalSlides-1)*(-width);
                current_slide = totalSlides;
                $(".slider ul").animate({"left":current+"px"}, "fast");
            }
        else
            $(".slider ul").animate({"left":current+"px"}, "slow"); 
    });
});

Answer 1

尝试以下方法 - 只使用标准的javascript setTimeout：

current = 0;
current_slide=1;

function runTimer() {
    $('#next img').trigger('click');
    var timeout = setTimeout("runTimer()",1000);
    }

$(document).ready(function(){
    width=951;
    var totalSlides=$(".slider ul li").length;
    $(".slider ul").removeAttr('width');
    $(".slider ul").attr('width',width*totalSlides);

    $('#next img').click(function(){
        current_slide++;
        current -= width;
        if(current_slide>totalSlides)
            {
                current=0;
                current_slide=1;
                //$(".slider ul").css('left',(totalSlides)*width);  
                $(".slider ul").animate({"left":current+"px"}, "fast");
            }
        else
            $(".slider ul").animate({"left":current+"px"}, "slow");
    });

    $('#prev img').click(function(){
        current_slide--;
        current += width;
        if (current_slide < 1) 
            {
                current = (totalSlides-1)*(-width);
                current_slide = totalSlides;
                $(".slider ul").animate({"left":current+"px"}, "fast");
            }
        else
            $(".slider ul").animate({"left":current+"px"}, "slow"); 
    });

    var timeout = setTimeout("runTimer()",1000);
});

Answer 2

我无法弄清楚如何jquery 超时功能有效。

只需使用setTimeout

jquery自定义滑块 - 自动动画幻灯片

2 个答案: