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/

是否有一个通用的解决方案来循环和使用jQuery / JavaScript动画系列的.png帧？

1 个答案: