在网站上的动画图片

Question

动画5张照片/照片有多容易？

E.g。 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

随着CSS通过CSS3添加的功能变得越来越强大，也可以用它完成幻灯片演示。 Smashing Magazine有an article如何实现。这是an example看起来的样子。

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