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

【问题标题】：How to create a series of animation in my case?在我的情况下如何创建一系列动画？
【发布时间】：2014-02-11 09:07:45
【问题描述】：

我有一系列图像，我想在 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 以使其看起来像动画。

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

【问题讨论】：

jsfiddle.net/DLz92/1 stackoverflow.com/questions/9240479/… 所以...您只需要极快的幻灯片，没有效果...

标签： javascript html css

【解决方案1】：

最好的办法是只拥有一个Image并且只改变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 库。

【讨论】：

你是对的。有时 jQuery 对我来说变得如此普遍，以至于我忘记了有人不使用它的可能性；-) 所以我的解决方案只是 jQuery，我忘了提及这一点并相应地编辑了我的帖子。谢谢你的提示。编辑：我已经编辑了我的第一个解决方案，因此它也可以在没有 jQuery 的情况下使用
人们不使用 jQuery...？我不明白。这就像去外面晒黑，而是躺在阴凉处。

【解决方案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

【讨论】：