タイマーに基づく複数のJQueryアクション

Question

私は推薦状を表示した証明箱を持っています。ボックスに接続され、アイコンのすぐ上には、CSSまたは画像を介して生成される小さな矢印が表示されます。

5秒ごとに、証言内容はフェードイン/フェードアウトで変更されます。小さな画像は右にスライドし、アイコンは色付きのアイコンに消えます。ループの終わり（5番目に達すると）は、矢印が左端までスライドし、ループが再び開始されます。

私はループでこれを効率的にやり遂げる方法やそれを時間を計る方法にあまり慣れていません。私はどのようにそれをフェードアウトすることができるかの基本を知っていますが、残りの部分は失われています。

ありがとうございました！

Answer 1

setIntervalはあなたが探しているものです。

var counter = 0; 
var repeat = setInterval(myFunc, 5000); 

function myFunc() 
{ 
    //increment counter 
    counter++; 

    if (counter == 5) 
    { 
     //reset counter 
     counter = 0; 
     //time to slide all the way to the left 
    } 
    else 
    { 
     slide one image to the right 
    } 
} 

Answer 2

基本的に、あなたは他の関数ごとに5000msを実行setInterval関数を作成する必要があります。他の関数は、あなたの謝辞の配列をループし、各setTimeoutの実行後に1ずつインクリメントする必要があります。

var testimonials = ['test 1', 'test 2', 'test 3', 'test 4', 'test 5']; 
var counter = 0; 
var time = 5000; // modify this using milliseconds 
var timer = window.setInterval(swapTestimony, time); 

function swapTestimony() { 
    counter += 1; 
    if (counter === testimonials.length + 1) { 
     counter = 1; 
    } 
    // do your animations here 
    console.log(testimonials[counter - 1]); 
}