網站上的動畫圖片

Question

動畫5張圖片/照片有多容易？

E.g. http://artyougrewupwith.com/

什麼是最好的語言（S）用來做這種效果呢？

問候

茶

Answer 1

至少有兩種方法可以做到這一點（不包括閃存）：

的JavaScript：

可能是最常見的方式今天做將會使用JavaScript。從頭開始編寫它可能需要一些時間，特別是如果你不習慣編寫JavaScript。但是，如果您使用像jQuery這樣的庫可以，那麼有很多插件完全可以做到這一點。

下面是一個例子：

• http://nivo.dev7studios.com/

CSS

使用CSS成爲通過與CSS3添加的功能越來越強大，還可以實現幻燈片接着就，隨即。關於如何實現，Smashing Magazine有an article。這可能是an example。

該解決方案的缺點是對新的CSS功能的瀏覽器支持有限。

Answer 2

你可以做一個動畫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 /秒的速度，並且以後一旦到達端。