Question

我有一系列图像，我想将它们作为html中的一系列动画播放

<img src='image1.png' />
<img src='image2.png' />
<img src='image3.png' />
<img src='image4.png' />
<img src='image5.png' />
<img src='image6.png' />
<img src='image7.png' />
<img src='image8.png' />
<img src='image9.png' />
<img src='image10.png' />
<img src='image11.png' />
<img src='image12.png' />

他们都需要在同一位置，但只需从image 1快速交换到image 12，使其看起来像一个动画。

有没有办法正确地做到这一点？我搜索谷歌但没有运气。谢谢你的帮助！

Answer 1

最好的方法是只有一个Image并且只更改图像src属性。像

<img src="image1.png" id="animationImage" />

之后您只需更改例如setInterval：

即可

var imageId = 1;
window.setInterval("changeImage()", 100);
function changeImage(){
    imageId++;
    if (imageId > 12)
        imageId = 1;
    $("#animationImage").attr("src", "image" + imageId + ".png");
    // if you are NOT using jQuery, use this line instead:
    document.getElementById("animationImage").src = "image" + imageId + ".png"
}

当然你也可以简单地隐藏/添加图片：

HTML

<img src="image1.png" class="animationImage" />
<img src="image2.png" class="animationImage" />
<img src="image3.png" class="animationImage" />
<img src="image4.png" class="animationImage" />
<img src="image5.png" class="animationImage" />
<img src="image6.png" class="animationImage" />
<img src="image7.png" class="animationImage" />
<img src="image8.png" class="animationImage" />
<img src="image9.png" class="animationImage" />
<img src="image10.png" class="animationImage" />
<img src="image11.png" class="animationImage" />
<img src="image12.png" class="animationImage" />

使用Javascript：

$(".animationImage:not(:first)").hide();
var imageId = 0;
window.setInterval("changeImage()", 100);
function changeImage(){
    $($(".animationImage")[imageId]).hide();
    imageId++;
    if (imageId > 11)
        imageId = 0;
    $($(".animationImage")[imageId]).show();
}

在这两个示例中，数字100表示应用程序在显示下一个图像之前将等待的毫秒数。

编辑最后一个解决方案假定使用jQuery库。

Answer 2

注意：此解决方案需要jQuery

我将使用jQuery执行此操作：

function swap()
{
    var images = $("img");
    var on = false;
    for(var i = 0; i < images.length; i++)
    {
        if($(images[i]).css("display") != "none")
        {
            on = true;
            $(images[i]).css("display", "none");
        }
        else if(on)
        {
            on = false;
            $(images[i]).css("display", "block");
        }
    }

    if(on)
    {
        $(images[i]).css("display", "block");
    }
}

这将在调用时按顺序将每个图像交换到下一个图像：

$(document).ready(function(){
    setInterval(function(){swap();}, 1000/30);
});

如何在我的情况下创建一系列动画？

2 个答案:

注意：此解决方案需要jQuery

JSFiddle