javascript - 是否有使用 jQuery / JavaScript 循环遍历和动画系列 .png 帧的通用解决方案？

Question

我想在我正在开发的网站上展示一些动画“插图”。

由于质量严重下降，.gif 不是一个选项。

是否有任何解决方案可以让我遍历 PNG 文件夹并将它们显示在屏幕上？

提前致谢。

Answer 1

例如，如果图像被命名为 1.png 到 25.png，这样的事情就会起作用。

var slides = 25; //number of slides
var i = 1; //first slide
var delay = 200; //set delay
var timer;

function pngani() {
    if (i <= slides) {
        $('#show img').attr('src', 'pathtofile/' + i + '.png');
    }
    i++;
}
$('#start').click(function () {
    timer = setInterval(pngani, delay);
    pngani();
});
$('#pause').click(function () {
    clearInterval(timer);
    timer = null;
});
$('#reset').click(function () {
    i = 1;
    $('#show img').attr('src', 'pathtofile/' + i + '.png');
});

我添加了一个开始、暂停和重置按钮，因此可以控制执行。

做了一个小提琴：http: //jsfiddle.net/filever10/Kur9u/