基于计时器的多个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

基本上，您需要创建一个setInterval函数，每5000毫秒执行一次另一个函数。另一个函数需要遍历您的推荐数组，并在每次执行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]);
}