jQuery广告小动画制作(含测试源码)

本博文源于jQuery基础，旨在探讨如何实现广告小动画。

实验效果

依次淡入，最终效果

测试用图

点击图片，右击命名为“ad_数字.png”，1，2，3，4，5

实验步骤

创建文件

结构为

书写简单的html代码

<div class="banner">
	<img class="no1" src="images/ad_1.png" alt="" />
	<img class="no2" src="images/ad_2.png" alt="" />
	<img class="no3" src="images/ad_3.png" alt="" />
	<img class="no4" src="images/ad_4.png" alt="" />
	<img class="no5" src="images/ad_5.png" alt="" />
</div>

书写css代码

学会用css文件里写，代码为：

*{
	margin: 0;
	padding: 0;
}
.banner{
	width: 1280px;
	height: 400px;
	margin: 0 auto;
	position: relative;
}
.banner img{
	position: absolute;
	display: none;
}
.no1{
	left: 60px;
	top: 60px;
}
.no2{
	left: 130px;
	top: 80px;
}
.no3{
	left: 330px;
	top: 40px;
}
.no4{
	left: 560px;
	top: 80px;
}
.no5{
	left: 848px;
	top: 0px;
}

书写jquery代码

<script type="text/javascript" src="jslib/jquery-3.5.1.min.js"></script>
	<script type="text/javascript">
		$(".banner img").each(function(i){
			$(this).delay(i*400).fadeIn(600);
		});
</script>
	

jquery代码写完，运行程序，收获喜悦！

总结

其实代码原理是每张图固定延迟动画，然后不断做淡入动作