Question

我有这个（这里简化）代码，它改变了点击时的背景位置，但我也需要把它们放在一个自动循环中

<script type="text/javascript">
$(window).load(function(){
    $(".sle1").click(function() {
        $(".slimgs").animate({backgroundPosition: '-908px 0px'});
    });
    $(".sle2").click(function() {
        $(".slimgs").animate({backgroundPosition: '-681px 0px'});
    });
    $(".sle3").click(function() {
        $(".slimgs").animate({backgroundPosition: '-454px 0px'});
    });
});
</script>

我的意思是在页面加载5秒后，第一个函数运行

$(".sle1").click(function() {
       $(".slimgs").animate({backgroundPosition: '-908px 0px'});
});

然后在5秒之后.sle2并且当它在5秒后到达.sle3（最后一个函数）时它应该返回并再次运行第一个函数（循环）

我尝试在每个功能之后添加“，5000”，但它不起作用

感谢任何帮助

Answer 1

使用window.setInterval每5秒执行一次功能。

要循环使用这三个函数，您可以将它们全部存储在一个数组中，并且每次都将i设置为应该调用的函数。

var i = 0;
var functions = [
    function() {
        // instead of copying that code, you could also do
        // $(".sle1").click() - or you can just use functions[0]
        // as argument when assigning the click listener.
        $(".slimgs").animate({backgroundPosition: '-908px 0px'});
        i = 1;
    },
    function() {
        // second animation here
        i = 2
    },
    function() {
        // third animation here
        i = 0
    }
];
window.setInterval(function () {
    functions[i]();
}, 5000);

[编辑]：没有更多的响铃，因为点击不起作用供将来参考：如果您不需要单击以干扰自动切换并希望仅使用自动循环存档类似的东西，请删除函数中的i=语句，而是插入i++; i%= functions.length在functions[i]();之后。

Answer 2

这应该有效，尽管有更优雅的方法可以做到这一点

$(window).load(function(){
    $(".sle1").click(function() {
        $(".slimgs").animate({backgroundPosition: '-908px 0px'});
        window.setTimeout(function() {
             $(".sle2").click();
        },5000);
    });
    $(".sle2").click(function() {
        $(".slimgs").animate({backgroundPosition: '-681px 0px'});
        window.setTimeout(function() {
             $(".sle3").click();
        },5000);
    });
    $(".sle3").click(function() {
        $(".slimgs").animate({backgroundPosition: '-454px 0px'});
        window.setTimeout(function() {
             $(".sle1").click();
        },5000);
    });

    window.setTimeout(function() {
             $(".sle1").click();
    },5000);
});

Answer 3

setTimeout(
    function() {
        $(".sle1").trigger('click');

        setInterval(
            function() {
                $(".sle1").trigger('click');
            },
            15000
        );

    },
    5000
);

setTimeout(
    function() {
        $(".sle2").trigger('click');

        setInterval(
            function() {
                $(".sle2").trigger('click');
            },
            15000
        );

    },
    10000
);

setTimeout(
    function() {
        $(".sle3").trigger('click');

        setInterval(
            function() {
                $(".sle3").trigger('click');
            },
            15000
        );

    },
    15000
);

Answer 4

如果您愿意改进代码并使其更简洁，可以使用window.setInterval尝试以下操作：

function changeBackground(interval, frames) {
    var int = 1;
    function changer() {
        document.body.id = "b" + int;
        int++;
        if (int === frames) {
            int = 1;
        }
    }
    var swap = window.setInterval(changer, interval);
}
changeBackground(2000, 10); //milliseconds, frames

Example online

谈到你的例子，它更难说，因为它不是很清楚。尝试为.stop()效果添加.animate()和持续时间：

$(window).load(function(){
    $(".sle1").click(function() {
        $(".slimgs").stop().animate({backgroundPosition: '-908px 0px'}, 5000);
    });
    $(".sle2").click(function() {
        $(".slimgs").stop().animate({backgroundPosition: '-681px 0px'}, 5000;
    });
    $(".sle3").click(function() {
        $(".slimgs").stop().animate({backgroundPosition: '-454px 0px'}, 5000);
    });
});

.stop() - jQuery .stop()方法用于在动画完成之前停止动画或效果。

Jquery循环并每隔X秒运行（单击）函数

4 个答案:

Example online