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

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

最好的方法是只有一个图像，只更改图像 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);
});

JSFiddle