Question

我有一个方形DIV（300px x 300px），我希望使用计时器每5秒翻转一次。我想用jQuery flip plugin来完成这个。这是我到目前为止所做的：

感谢任何帮助。

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);

使用计时器翻转div

2 个答案: