JavaScript 仿動畫（循環播放圖片）

因為行動裝置的節流設計，只要是影片或是音樂都是需要自行點按才可以播放，也因此無法自動播放，但如果真的要使行動裝置有動畫效果的話，可以使用此方式來製作，但最好是配合將所有圖片都預先戴入完後在執行動畫才不會有不順的地方。

製作方式一(可循環播放圖片)

/*串圖片動畫*/
// 設置輪番顯示速度。
var showSpeed = 85;

// 勻滑轉換時間。
var crossFadeDuration = 0;

//// 指定圖像文件。基本上，您只須修改這段代碼！至於怎麼改，相信您一看就明白了！	
var pic = new Array();
// emmet {pic[$] = 'assets/img/ms-pd/$.jpg' }*100	
pic[0] = 'assets/img/ms-pd/1.jpg' 
pic[1] = 'assets/img/ms-pd/1.jpg' 
pic[2] = 'assets/img/ms-pd/2.jpg' 
pic[3] = 'assets/img/ms-pd/3.jpg' 
pic[4] = 'assets/img/ms-pd/4.jpg' 
pic[5] = 'assets/img/ms-pd/5.jpg' 
pic[6] = 'assets/img/ms-pd/6.jpg' 
pic[7] = 'assets/img/ms-pd/7.jpg' 
pic[8] = 'assets/img/ms-pd/8.jpg' 
pic[9] = 'assets/img/ms-pd/9.jpg'
// 看幾張就依此數字編號來規劃
////// 

var t;
var j = 0;
var p = pic.length;
var preLoad = new Array();
for (i = 0; i < p; i++) {
	preLoad[i] = new Image();
	preLoad[i].src = pic[i];
}

function playPics() {
	if (document.all) {
		 document.images.playPictures.style.filter="blendTrans(duration=0)";
		 document.images.playPictures.style.filter="blendTrans(duration=crossFadeDuration)";
		 document.images.playPictures.filters.blendTrans.Apply();
	}
	document.images.playPictures.src = preLoad[j].src;
	if (document.all) {
		 document.images.playPictures.filters.blendTrans.Play();
	}
	j = j + 1;
	if (j > (p - 1)) j = 0;
	t = setTimeout('playPics()', showSpeed);
}
/////
/*/串圖片動畫*/

/*串圖片動畫*/

// 設置輪番顯示速度。

var showSpeed = 85;

// 勻滑轉換時間。

var crossFadeDuration = 0;

//// 指定圖像文件。基本上，您只須修改這段代碼！至於怎麼改，相信您一看就明白了！

var pic = new Array();

// emmet {pic[$] = 'assets/img/ms-pd/$.jpg' }*100

pic[0] = 'assets/img/ms-pd/1.jpg'

pic[1] = 'assets/img/ms-pd/1.jpg'

pic[2] = 'assets/img/ms-pd/2.jpg'

pic[3] = 'assets/img/ms-pd/3.jpg'

pic[4] = 'assets/img/ms-pd/4.jpg'

pic[5] = 'assets/img/ms-pd/5.jpg'

pic[6] = 'assets/img/ms-pd/6.jpg'

pic[7] = 'assets/img/ms-pd/7.jpg'

pic[8] = 'assets/img/ms-pd/8.jpg'

pic[9] = 'assets/img/ms-pd/9.jpg'

// 看幾張就依此數字編號來規劃

//////

var t;

var j = 0;

var p = pic.length;

var preLoad = new Array();

for (i = 0; i < p; i++) {

preLoad[i] = new Image();

preLoad[i].src = pic[i];

}

function playPics() {

if (document.all) {

document.images.playPictures.style.filter="blendTrans(duration=0)";

document.images.playPictures.style.filter="blendTrans(duration=crossFadeDuration)";

document.images.playPictures.filters.blendTrans.Apply();

}

document.images.playPictures.src = preLoad[j].src;

if (document.all) {

document.images.playPictures.filters.blendTrans.Play();

}

j = j + 1;

if (j > (p - 1)) j = 0;

t = setTimeout('playPics()', showSpeed);

}

/////

/*/串圖片動畫*/

<body onload="playPics()">
  <div id="ms-pd"></div>
</body>

</body>

原例中是使用直接對應的 <img src=""> 路徑替換， <img src="./animation/picture-a.jpg" name="playPictures">
但在此是直接使用 div 指定 ID 後接圖片路徑，所以只要 js Array (資料陣列)路徑對的話，一樣會出現 <img> 在路徑之中。
注意， name="playPictures" 很關鍵，一定要跟以下 js 代碼引用物件名吻合。
<body onload="playPics()"> 啟用動畫於 html > body
var showSpeed = 85; 實測之下最快只能到此的值，在低下去(更快)的話，畫面會閃

製作方式二(無循環播放圖片)

此方式只能單放一次，同樣也是在 DOM 替換 html <img> 元素的路徑。
setInterval("cnahgeimg()",200); 方法可按照指定的周期（以毫秒計）來調用函數或計算表達式。
語法： setInterval(code,millisec[,"lang"])
cnahgeimg() 為下方函式的名稱，後方 ,200 指的是速度
if(iNum<=224) 224指的是共用224張圖片

var iNum = 1;
window.setInterval("cnahgeimg()",200); 
function cnahgeimg(){
	if(iNum<=224){
		document.getElementById('aa').src = "img/"+iNum+".jpg";
		iNum=iNum+1;
	}
}

var iNum = 1;

window.setInterval("cnahgeimg()",200);

function cnahgeimg(){

if(iNum<=224){

document.getElementById('aa').src = "img/"+iNum+".jpg";

iNum=iNum+1;

}

<img id="aa" src="1.jpg">

1	<img id="aa" src="1.jpg">

資料來源：
JavaScript 實現仿動畫（循環播放圖片）
HTML DOM setInterval() 方法

標籤雲

製作方式一(可循環播放圖片)

製作方式二(無循環播放圖片)