如何让JS函数自行执行

How to get a JS function to execute itself

本文关键字：执行 函数 JS      更新时间：2023-09-26

我有一个背景图像（宽度=2000px，高度=400px）位于宽度和高度等于400px的div后面。我的图像被分成5个块，宽度和高度都等于400px。我希望每次调用函数来模拟GIF图像时，我的图像偏移400px。

    var imageWidth = $("#imageScroll").width();
            console.log(imageWidth);
    var timer = setInterval(function(){ shiftImage() }, 250);
    function shiftImage(){
            $("#imageScroll").mouseover (function(){
                $("#imageScroll").css({"background-position-x": (imageWidth)});
            });
        };
});

这是我的jQuery代码，我尝试过很多不同的代码，但都失败了。imageScroll是我希望图像通过的div的ID。

您必须定义图像的css，以便它在x轴上重复自己。

<style>
    #imageScroll{
        height: 400px;
        width: 500px;
        background-image: url('./background.jpg');
        background-repeat: repeat-x;
    }
</style>

然后，在页面底部，或者在body onload中，您应该执行以下指令。

intervalFunc = setInterval(shiftImage, 250);
function shiftImage(){
    var currentBackgroundX = $('#imageScroll').css('background-position-x');
    split = currentBackgroundX.split("%");
    currentBackgroundX = split[0];
    currentBackgroundX = parseInt(currentBackgroundX);
    $('#imageScroll').css({"background-position-x": (currentBackgroundX + 25) + '%'});
}

实际上，我没有对定位部分给出太多，因为这是一个完全不同的主题。但我想做的是，每250毫秒将背景位置x改变25%。您可以更改shiftImage函数的内部工作方式。

如果你想在任何时候停止动画，只需运行

clearInterval(intervalFunc);

希望这能帮助

编辑：jsFiddle

编辑2：编辑小提琴链接

编辑3：编辑小提琴链接

相关文章：