Question

我尝试使用jQuery交换集合序列中元素的背景图像来创建动画，其中每个图像都是不同的帧，它应该迭代帧直到它到达最后一帧然后返回再次开始。

我的代码如下：

$spinner_currentFrame = 1;

            function UpdateSpinner(target, numFrames)
            {
                $spinner_currentFrame = ($spinner_currentFrame) + 1;
                if($spinner_currentFrame > numFrames) {
                    $spinner_currentFrame = 1;
                }
                $(target).css("background-image", "frame-" + $spinner_currentFrame + ".jpg");
            }

            $(document).ready(function()
            {
                $spinner_loadingAnim = setInterval(function ()
                {
                    UpdateSpinner('#spinner', 300);
                },
                24);
            });

我没有使用精灵的原因是因为我有几百张图像，而且这些帧已经像frame-1.jpg, frame-2.jpg那样从Flash导出。但是我的代码没有报告任何错误，但背景图片没有被添加......任何想法？建议？

由于

Answer 1

background-image css属性需要使用url("/path/frame-1.jpg")设置。

$(target).css("background-image", "url('frame-" + $spinner_currentFrame + ".jpg')");

Answer 2

也许我错了，但不一定要像

$(target).css("background-image", "url(frame-" + $spinner_currentFrame + ".jpg)");

Answer 3

 $(target).css("background-image", "url('frame-" + $spinner_currentFrame + ".jpg')");

喜欢问题Setting background-image using jQuery CSS property

编辑错误

按顺序使用jQuery交换图像

3 个答案: