JQ大图渐变特效

最新推荐文章于 2024-09-02 07:00:00 发布

QQ_286115751

最新推荐文章于 2024-09-02 07:00:00 发布

阅读量455

点赞数

文章标签： html5 图片

本文链接：https://blog.csdn.net/qq_35515563/article/details/59114435

版权

大图渐变特效

一般用于无需控制前后图片显示的页面，通过计时器自执行触发函数内对应图片的淡入淡出渐变的效果

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>大图渐变特效</title>
	<link rel="stylesheet" href="css/reset.css">
	<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
	<style>
		.wrap {
			position: relative;
			width: 850px;
			height: 400px;
			margin: 50px auto;
			border: 1px solid #cc8;
		}
		.wrap img {
			position: absolute;
			width: 850px;
			height: 400px;
		}
	</style>
</head>
<body>
	<div class="wrap" id="box">
		<img src="https://img-blog.csdn.net/20170301181323161?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzU1MTU1NjM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="图片">
		<img src="https://img-blog.csdn.net/20170301181349005?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzU1MTU1NjM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="图片">
		<img src="https://img-blog.csdn.net/20170301181407492?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzU1MTU1NjM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="图片">
	</div>
	<script>
		// 1.先实现逐一图片进行淡出和淡入效果
		// 2.因为图片数量不确定需要判断让对应的图片淡入同时另外其他图片淡出。因此增加一个计时器。
		// 当切换到最后一张图片的时候重新归零显示图片
		var circleImages = 0;
		function numImages(){
			circleImages++;
			if (circleImages == $('#box img').length) {
				circleImages = 0;
			};
			$('#box img').eq(circleImages).fadeIn(1000).siblings().fadeOut(1000);
		}
		setInterval(numImages, 2000);
	</script>
</body>
</html>

QQ_286115751

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JQ大图渐变特效

大图渐变特效一般用于无需控制前后图片显示的页面，通过计时器自执行触发函数内对应图片的淡入淡出渐变的效果大图渐变特效 .wrap { position: relative; width: 850px; height: 400px; margin: 50px auto; border: 1px solid #cc8; } .wr
复制链接

扫一扫