如何将图片弄成动画

1.首先要一组图片(锅打灰太狼)

将图片名称命名为h[0-9].png,方便后期操作
在这里插入图片描述

2.创建一个div用来存放img图片。

<div class="box2">
</div>

3.js主要用到创建定时器,和去除定时器,内有详解

	<script type="text/javascript">
		// 获取.box2
		var box2 = document.querySelector('.box2');
		//创建img
		var img = document.createElement('img');
		//图片下标
		var index = 0
		// 将img添加到box2中
		box2.appendChild(img);
		
		// 创建动画定时器
		ImgHtl = setInterval(function() {
		//判断图片下标是否大于5
			if (index < 5) {
				//每循环一次加一
				index++;
				img.src = "./img/h" + index + ".png";
			} else {
				//移除上升定时器
				clearInterval(ImgHtl);
				// 创建下降定时器
				ImgHtl2=setInterval(function(){
					if(index>0){
						index--;
						img.src = "./img/h" + index + ".png";
					}else{
						img.remove();
						clearInterval(ImgHtl2);
					}
				},150)
			}
		}, 150)
	</script>

版权声明:本文为Wennsai原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。