js切换图片方式形成动画

最新推荐文章于 2023-09-19 11:22:35 发布

Tomorrow YE

最新推荐文章于 2023-09-19 11:22:35 发布

阅读量1.5k

点赞数

分类专栏： HTML5前端文章标签： js 切换图片动画

本文链接：https://blog.csdn.net/qq_29301417/article/details/77059492

版权

HTML5前端专栏收录该内容

40 篇文章 1 订阅

订阅专栏

这段代码展示了如何使用JavaScript创建一个图片切换动画，包括宠物眨眼和小孩看书两个部分。通过设置定时器和数组存储不同状态的图片路径，实现了宠物眼睛在大眼和小眼之间平滑切换，以及孩子灯光在强光和弱光之间交替，从而产生动画效果。

摘要由CSDN通过智能技术生成

function secend_animation(){
		var petbigeye = $("#petbigeye").val();
		var petsmalleye = $("#petsmalleye").val();
		var kidweaklight = $("#kidweaklight").val();
		var kidpowerfullight = $("#kidpowerfullight").val();//活动图片存放地址
		var kidlightIndex = 0;
		var petIndex = 0;//定义循环切换
		var timeInterval=1000; 
		var pettimeInterval=700; //定义切换频率，单位毫秒
		var kidArr = new Array();  //kid看书数组
		var petArr = new Array();  //小熊眨眼数组
		kidArr[0] = kidpowerfullight;
		kidArr[1] = kidweaklight; 
		petArr[0] = petbigeye;
		petArr[1] = petsmalleye;
		setInterval(Peteye,timeInterval);  
		setInterval(readbook,pettimeInterval); //启动定时器 
		function Peteye(){//宠物眨眼
			var peteyeobj=document.getElementById("peteye"); 
			if (petIndex==petArr.length-1) { //最后一张图片，将index置0，以此不断循环
					petIndex=0; 
				} 
			else { 
					petIndex+=1; 
				}	 
			peteyeobj.src=petArr[petIndex];  //修改图片
		}
		function readbook(){//小孩看书
			var kidlightobj=document.getElementById("kidlight"); 
			if (kidlightIndex==kidArr.length-1) { 
				kidlightIndex=0; 
				} 
			else { 
				kidlightIndex+=1; 
				}	 
			kidlightobj.src=kidArr[kidlightIndex]; 
		}
	}