1

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

<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)”，但没有用

任何帮助表示赞赏

4

4 回答 4

3

使用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=函数中的 th 语句，而是插入i++; i%= functions.lengthafter functions[i]();。

于 2013-11-03T21:07:46.850 回答
1

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

$(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);
});
于 2013-11-03T21:07:23.840 回答
1 
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
);
于 2013-11-03T21:07:36.727 回答
0

如果您愿意改进您的代码，使其更简洁，您可以尝试以下方法，使用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

在线示例

谈论你的例子，因为它不是很清楚，所以很难说。尝试为您的效果添加.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()方法用于在完成之前停止动画或效果。

于 2013-11-03T21:06:19.667 回答