使用计时器翻转 div

Question

我有一个方形 DIV(300px x 300px)，我想使用计时器每 5 秒翻转一次。我想使用 jQuery Flip 插件 来完成此任务。这是我到目前为止所拥有的：

http://jsfiddle.net/psivadasan/4dPaX/3/

感谢任何帮助。

Answer 1

无论您想在 JavaScript 中定期运行什么，都可以使用 setInterval。对于您的翻转代码：

setInterval(
    function() {
        $('#flipbox').flip({
                    direction: 'tb',
                    bgColor: '#FFFFF',
                    color: '#000000',
                    speed: 500,
                    content: "Hello World!"
                });
    },
    5000);

Answer 2

您没有在 jsfiddle 中包含任何库，因此它不起作用。但基本思想是将翻转代码放在一个区间内：

var $flipBox  = $('#flipbox'),
    flip_opts = [{
        direction: 'tb',
        bgColor: '#FFFFF',
        color: '#000000',
        speed: 500,
        content: "Hello World!"
    },
    {
        direction: 'tb',
        bgColor: '#FFFFF',
        color: '#000000',
        speed: 500,
        content: "Goodbye World!"
    }],
    curr_indx = 0,
    timer     = setInterval(function () {
        if (curr_indx >= flip_opts.length) {
            curr_indx = 0;
        }
        $flipBox.flip(flip_opts[curr_indx]);
        curr_indx++;
    }, 5000);

flip_opts 变量是一个对象数组，每个对象都是一组要传递给翻转插件的选项。该代码将按顺序遍历每组选项，然后循环回到开头。

如果你想停止间隔，你可以调用：clearInterval(timer);