Question

我有以下形式的JPGS序列：

Logo_1001.jpg
Logo_1002.jpg
Logo_1003.jpg
Logo_1004.jpg
Logo_1005.jpg
...
all the way to
Logo_1208.jpg

我试图每秒（大致）改变图像的来源以模仿动画gif，使用这些JPG。该动画在单击图像时开始。

到目前为止，这是我正在使用的内容，虽然我确定它可以更好地编码。

此外，它现在并没有真正发挥作用; x

function StartAnimation() {
    var name = $('#logo').attr('src');
    var index = name.indexOf(".jpg");

    var int = name.slice(index-4,index);

    while(int<1208){
        int++;

        var newname=name.slice(0,index-4);
        newname=newname+int;
        name=newname+".jpg";

        $('#logo').attr('src',name).delay(500);
    }
}

$("#logo").click(function() {
    StartAnimation()
});

思考？援助？

由于

Answer 1

使用setTimeout进行此操作。

$("#logo").click(function() {
    var $logo = $(this), src = $logo.attr("src");
    var index = src.indexOf('.jpg');
    var step = +src.slice(index-4, index);

    function frame() {
        step++;
        if(step < 1050) {
            var newSrc = src.slice(0, index-4) + step + ".jpg";
            console.log(newSrc);
            $logo.attr('src', newSrc);
            setTimeout(frame, 1000);
        }
    }

    frame();
});

http://jsfiddle.net/DgZ4M/

您的脚本问题在于使用.delay。它仅在链接jQuery UI动画时才有用，而不是任意延迟。 jQuery文档清楚地说明了

.delay（）方法最适合延迟排队的jQuery效果。因为它是有限的 - 例如，它没有提供取消延迟的方法 - .delay（）不能替代JavaScript的本机setTimeout函数，这可能更适合某些用例。

Answer 2

这是一种方式，而不是“jQuery”本身。

var _animation_timer;
function LogoAnimate (go, num) {
    if (parseInt(num) == 'NaN' || parseInt(num) == undefined ||
        (_animation_timer == null && go != 'go') || go == 'stop')
    {
        clearTimeout(_animation_timer);
        return;
    }
    if (num >= 1208 || num < 1001) {
        num = 1001;
    }
    //$('#logo').attr('src','Logo_'+num+'.jpg');
    $('#logo').text('Logo_'+num+'.jpg');
    num++;
    _animation_timer = setTimeout('LogoAnimate("go","'+num+'")',1000);
}

$(document).ready(function(){
    var _images_preloaded = [];
    for (i = 1001; i <= 1208; i++) {
        _images_preloaded[i] = new Image();
        _images_preloaded[i].src = 'Logo_'+i+'.jpg';
    }
});

演示标记：

<div id="logo">Not started.</div>
<p>
 <a href="javascript:LogoAnimate('go','1001');">Start</a> - 
 <a href="javascript:LogoAnimate('stop');">Stop</a>
</p>

注意，由于我没有那么多图像，我的测试只涉及更改文本。您只需要删除引用的行并使用$ .text（）删除下面的行。我也不认为你可以找出$ .click（）部分。

Answer 3

首先，您需要预加载所有图像。第二 - 用jpgs序列做动画是一个坏主意：）

jQuery图像替换动画（模仿动画gif）

3 个答案: