html - 网站上的动画图片

Question

为 5 张图片/照片制作动画有多容易？

例如http://artyougrewupwith.com/

用于实现此效果的最佳语言是什么？

问候

茶

Answer 1

你可以做一个动画 gif（这是相当古老的技术），或者你可以用 javascript 设置一个计时器来切换图像源。我建议使用 javascript 代码。这是一个示例：

var i=0;
var imageSrcs=['image1.png','image3.png','image3.png','image4.png','image5.png'];
var imageElement=document.getElementById('imageToAnimate');
setInterval(
   function(){
      imageElement.src=imageSrcs[i];
      i=(i+1)%(imageSrcs.length+1);
   },1000)//Every 1000 milliseconds

这将以 1/秒的速度循环遍历阵列中的图像，并在到达终点后重复。

Answer 2

至少有两种方法可以做到这一点（不包括 Flash）：

JavaScript：

今天最常见的方法可能是使用 JavaScript。自己从头开始编写它可能需要一些时间，尤其是如果您不习惯编写 JavaScript。但是，如果您可以使用像jQuery这样的库，那么有很多插件可以做到这一点。

这是一个例子：

• http://nivo.dev7studios.com/

CSS

通过 CSS3 添加的功能，CSS 变得越来越强大，也可以用它来完成幻灯片放映。Smashing Magazine 有一篇关于如何实现的文章。这是一个可能看起来像的示例。

此解决方案的缺点是浏览器对新 CSS 功能的支持有限。