我已經創建了我自己的滑塊。每張幻燈片在不同元素上都有不同的動畫，所以我有這樣的按鈕可以從一張幻燈片切換到另一張幻燈片。用jQuery設置不同事件的時間間隔

$('.content1').click(function(e){ 
    $('#image1').animate({'margin-left': '0px', 'margin-top': '0px'}); 
    $('#box1').animate({'margin-top': '0px'}); 
    hide2(); //hiddeing slide2 
    hide3(); //hidding slide3 
    e.preventDefault(); 
}); 

$('.content2').click(function(e){ 
    hide1(); //hidding slide1 
    hide3(); //hidding slide2 
    $('#box2').animate({'margin-top': '0px'}); 
    $('#image2').animate({'margin-top': '0px'}); 
    e.preventDefault(); 
}); 


$('.content3').click(function(e){ 
    hide1(); 
    hide2(); 
    $('#box3').animate({'margin-left': '0px'}); 
    $('#image3').stop().delay(1000).show().animate({'opacity': '1'}); 
    e.preventDefault(); 
});

我現在想爲滑塊每隔X秒添加一個間隔。

我不知道是否有可能使3個不同的電話，而不僅僅是一個功能我用：

setInterval(function(){ 
    nameOfFunction(); 
    }, 6*1000);

感謝。

來源

2013-02-26 Alvaro

切勿使用的setInterval爲動畫，由於定時將永遠不會被同步。相反，使用setTimeout（function（）{}，1000），並作爲動畫的回調函數，再次使用setTimeout。 – 2013-02-26 17:12:29

當不是回調函數時，setTimeout函數應該在什麼內部？ – Alvaro 2013-02-26 17:28:18

這些函數應該是相同的，假設你想要在初始化時使用相同的動畫，就像在整個滑塊中一樣。請確保設置一個計時器變量，以防您想取消它，即var timer = setTimeout（）; – 2013-02-26 17:41:33

最後我使用setTimeout解決了它，推薦使用@BradM。

我確定有一個更簡單的方法，但這裏是我如何做到的。下面的代碼：

菜單上單擊事件：

$('.content1').click(function(e){ 
    slide1(); 
    e.preventDefault(); 
}); 

$('.content2').click(function(e){ 
    slide2(); 
    e.preventDefault(); 
}); 

$('.content3').click(function(e){ 
    slide3(); 
    e.preventDefault(); 
});

幻燈片效果

function slide1(){ 
    next = 2; //setting which is gonna be the next slide 
    $('#image1').animate({'margin-left': '0px', 'margin-top': '0px'}); 
    $('#box1').animate({'margin-top': '0px'}); 

    hide2(); 
    hide3(); 
} 

function slide2(){ 
    next = 3; //setting which is gonna be the next slide 
    hide1(); 
    hide3(); 
    $('#box2').animate({'margin-top': '0px'}); 
    $('#image2').animate({'margin-top': '0px'}); 
} 

function slide3(){ 
    next = 1; //setting which is gonna be the next slide 
    hide1(); 
    hide2(); 
    $('#box3').animate({'margin-left': '0px'}); 
    $('#image3').stop().delay(1000).show().animate({'opacity': '1'}); 
}

Hidding功能

function hide1(){ 
    $('#image1').animate({'margin-left': '2000px'}); 
    $('#box1').animate({'margin-top': '-2000px'}); 
} 

function hide2(){ 
    $('#box2').animate({'margin-top': '600px'}); 
    $('#image2').animate({'margin-top': '-2000px'}); 
} 

function hide3(){ 
    $('#box3').animate({'margin-left': '-2000px'}); 
    $('#image3').animate({'opacity' : '0', 'display' : 'none'}, function(){ 
     $(this).hide(); 
    }); 
}

Onmouse在輸入/輸出操作

//when its over, we stop the movement 
var delay = 6000; //6 seconds 
$('#slider').hover(function(){ 
    clearTimeout(timer); 

}, function(){ 
//starting again the animation (since the last slide) 
    timer = window.setTimeout(playSlide, delay); 
});

主要playslide功能

var next = 2; //next slide will be the 2nd one at the start 
function playSlide(){ 
    var name = "slide" + next; 
    var method = eval(name); 

    method(); 

    //calling recursively the function 
    timer = window.setTimeout(playSlide, delay); 
}

首先調用

//only if there's an slider, we initate it 
if($('#slider').length){ 
    //first call the the slider 
    timer = window.setTimeout(playSlide, delay); 
}

來源

2013-02-27 16:42:07 Alvaro

用jQuery設置不同事件的時間間隔

回答