Jquery 使用计时器翻转div

我有一个正方形的DIV（300px 300px），我想用定时器每5秒翻转一次。我想用这个来实现这一点。以下是我目前掌握的情况：

感谢您的帮助。

无论您希望在JavaScript中定期运行什么，都可以使用

setInterval

。对于翻转代码：

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

无论您希望在JavaScript中定期运行什么，都可以使用

setInterval

。对于翻转代码：

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

---

您的JSFIDLE中没有包含任何库，因此它将无法工作。但基本思想是将翻转代码放在一个区间内：

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\u opts

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

---

如果要停止间隔，可以调用：

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

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\u opts
变量是一个对象数组，每个对象都是传递给flip插件的一组选项。这段代码将按顺序遍历每一组选项，然后循环回到开头

如果要停止间隔，可以调用：
clearInterval（计时器）
首先你需要处理你的小提琴你的链接没有jquery设置，也没有加载flip插件你需要处理你的小提琴你的链接没有jquery设置，也没有加载flip插件感谢回复。我将jQuery和flip插件包含在JSFIDLE中，并从上面粘贴了代码，但它似乎不起作用。以下是链接：@Prasant您没有包含jQuery UI库（这是必需的），您无法直接链接到github中的文件。我添加了jQueryUI库，并将flip插件代码直接粘贴到JSFIDLE中，它按照预期工作：您可以选择github的
raw
输出，这使URL看起来像这样：感谢Jasper提供了JSFIDLE代码以及如何在github上链接！谢谢你的回复。我将jQuery和flip插件包含在JSFIDLE中，并从上面粘贴了代码，但它似乎不起作用。以下是链接：@Prasant您没有包含jQuery UI库（这是必需的），您无法直接链接到github中的文件。我添加了jQueryUI库，并将flip插件代码直接粘贴到JSFIDLE中，它按照预期工作：您可以选择github的
raw
输出，这使URL看起来像这样：感谢Jasper提供了JSFIDLE代码以及如何在github上链接！谢谢你的回复。我尝试使用这段代码，它确实会更改DIV中的内容，但不会翻转。你知道为什么翻转没有发生吗？太好了…每隔一段时间它就会翻转…谢谢你的回答。我尝试使用这段代码，它确实会更改DIV中的内容，但不会翻转。你知道为什么翻转没有发生吗？太好了…每隔一段时间它就会翻转…thnx