js實現簡易HTML動畫-----手翻書版

HTML項目文件htmlproject01,圖片在picsource中。
在這裏插入圖片描述
實現效果如下:
在這裏插入圖片描述
圖片素材可以到百度網盤下載:

素材連接
(上次傳錯了,這次對了?)

具體代碼:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>lover-action</title>
	</head>
	<body>
	</body>
</html>

<script type="text/javascript">	
	picArray = ['picsource/第1張.jpg','picsource/第2張.jpg','picsource/第3張.jpg','picsource/第4張.jpg',
	            'picsource/第5張.jpg','picsource/第6張.jpg','picsource/第7張.jpg','picsource/第8張.jpg', 
	           'picsource/第9張.jpg','picsource/第10張.jpg','picsource/第11張.jpg','picsource/第12張.jpg',
	           'picsource/第13張.jpg','picsource/第14張.jpg','picsource/第15張.jpg','picsource/第16張.jpg',
	           
	           'picsource/第17張.jpg','picsource/第18張.jpg','picsource/第19張.jpg','picsource/第20張.jpg',
	            'picsource/第21張.jpg','picsource/第22張.jpg','picsource/第23張.jpg','picsource/第24張.jpg', 
	           'picsource/第25張.jpg','picsource/第26張.jpg','picsource/第27張.jpg','picsource/第28張.jpg',
	           'picsource/第29張.jpg','picsource/第30張.jpg','picsource/第31張.jpg','picsource/第32張.jpg',
	          
	           'picsource/第33張.jpg','picsource/第34張.jpg','picsource/第34張.jpg','picsource/第35張.jpg',
	           'picsource/第36張.jpg','picsource/第37張.jpg','picsource/第38張.jpg','picsource/第39張.jpg',
	           'picsource/第40張.jpg','picsource/第41張.jpg','picsource/第42張.jpg','picsource/第43張.jpg',
	           'picsource/第44張.jpg','picsource/第45張.jpg','picsource/第46張.jpg']
    i = 0
    function start(){
    	if(i<=picArray.length){
    		document.body.innerHTML ='<div><img src="'+picArray[i]+'">+</div>'
  			i++
    	}else{
    		i =0
    	}
    }
	setInterval(start,100)
</script> 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章